hacer - mostrar ocultar texto css

Mostrar y ocultar div con css

Question

En mi script hay 3 div. Quiero mostrar div con clase ab cuando pase el mouse sobre la primera línea y visualice div con clase abc , cuando pase el mouse sobre la segunda línea. De lo contrario, quiero mostrar div con clase a por defecto.

Pero nunca muestra div con la clase a .

HTML:

<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>

CSS:

.abc,.ab {
    display: none;
}
#f:hover ~ .ab {
    display: block;

}
#f:hover ~ .abc,.a {
    display: none;

}
#s:hover ~ .abc {
    display: block;

}
#s:hover ~ .ab,.a {
    display: none;
}

Aquí está mi violín de mi problema http://jsfiddle.net/mridulpv/n5fzB/1/

Answer 1

Código HTML :

    <a id="f">Show First content!</a>
    <br/>
    <a id="s">Show Second content!!</a>
    <div class="a">Default Content</div>
    <div class="ab hideDiv">First content</div>
    <div class="abc hideDiv">Second content</div>

Código de script:

$(document).ready(function() {
    $("#f").mouseover(function(){
        $(''.a,.abc'').addClass(''hideDiv'');
        $(''.ab'').removeClass(''hideDiv'');
    }).mouseout(function() {
        $(''.a'').removeClass(''hideDiv'');
        $(''.ab,.abc'').addClass(''hideDiv'');
    });

    $("#s").mouseover(function(){
        $(''.a,.ab'').addClass(''hideDiv'');
        $(''.abc'').removeClass(''hideDiv'');
    }).mouseout(function() {
        $(''.a'').removeClass(''hideDiv'');
        $(''.ab,.abc'').addClass(''hideDiv'');
    });
});

código css:

.hideDiv
{
    display:none;
}

Answer 2

Necesitas

.abc,.ab {
    display: none;
}

#f:hover ~ .ab {
    display: block;
}

#s:hover ~ .abc {
    display: block;
}

#s:hover ~ .a,
#f:hover ~ .a{
    display: none;
}

Demostración actualizada en http://jsfiddle.net/gaby/n5fzB/2/

El problema en su CSS original era que , en los selectores de CSS comienza un selector completamente nuevo. no está combinado ... entonces #f:hover ~ .abc,.a significa #f:hover ~ .abc y .a . Usted configuró eso para display:none por lo que siempre estaba configurado para estar oculto para todos los elementos .a .

Answer 3

Para ocultar un elemento, use:

display: none;
visibility: hidden;

Para mostrar un elemento, use:

display: block;
visibility: visible;

La diferencia es:

La visibilidad maneja la visibilidad de la etiqueta, la display maneja el espacio que ocupa en la página.

Si configura la visibility y no cambia la display , incluso si las etiquetas no se ven, aún ocupa espacio.

Answer 4

puede usar cualquiera de las siguientes cinco formas de ocultar elemento, depende de sus requisitos.

Opacidad

.hide {
  opacity: 0;
}

Visibilidad

.hide {
   visibility: hidden;
}

Monitor

.hide {
   display: none;
}

Posición

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

clip-path

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

Para mostrar, utilice cualquiera de los siguientes: opacidad: 1; visibilidad: visible; bloqueo de pantalla;

Fuente: https://www.sitepoint.com/five-ways-to-hide-elements-in-css/