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/