Mostrar y ocultar div con css

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:

Show First content! 
Show Second content!!
Default Content
First content
Second content

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/

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 .

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 tags no se ven, aún ocupa espacio.

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; locking de pantalla;

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

Código HTML :

  Show First content! 
Show Second content!!
Default Content
First content
Second content

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; }