¿Por qué no funciona la visibilidad de CSS?

Agregué una clase de “spoiler” en CSS para usar, bueno, spoilers. El texto normalmente es invisible pero aparece cuando el mouse se desplaza sobre él para revelar el spoiler a quien quiera leerlo.

.spoiler{ visibility:hidden; } .spoiler:hover { visibility:visible; } 

Debería ser simple, pero por alguna razón esto no funciona. El texto permanece invisible incluso cuando apunto con el mouse sobre él. ¿Alguna idea de lo que podría estar causando esto?

No puedes pasar el mouse sobre un elemento oculto. Una solución es anidar el elemento dentro de otro contenedor:

CSS:

 .spoiler span { visibility: hidden; } .spoiler:hover span { visibility: visible; } 

HTML:

 Spoiler: ET phones home. 

Manifestación:

http://jsfiddle.net/DBXuv/

Actualizar

En Chrome, se puede agregar lo siguiente:

 .spoiler { outline: 1px solid transparent; } 

Demostración actualizada: http://jsfiddle.net/DBXuv/148/

Funciona no solo para texto

 .spoiler { opacity:0; } .spoiler:hover { opacity:1; -webkit-transition: opacity .25s ease-in-out .0s; transition: opacity .25s ease-in-out .0s; } 

Cuando el texto es invisible, prácticamente no ocupa espacio, por lo que es prácticamente imposible desencadenar un evento de vuelo estacionario.

Debería intentar otro enfoque, por ejemplo, cambiar el color de la fuente:

 .spoiler{ color:white; } .spoiler:hover { color:black; } 

:hover pseudo clase :hover es solo para tags según las especificaciones de CSS. Los agentes de usuario no están obligados a admitir :hover sobre las tags que no son de anclaje según la especificación .

Si desea usar CSS para hacer visible su spoiler, tendrá que colocar tags alrededor del contenido de su alerón. Esto, por supuesto, significará que el mouse se convertirá en un puntero, pero puede suprimir esto agregando cursor: none; .

Si no funciona, intenta

 .spoiler span { visibility: hidden; line-height:20px; } .spoiler:hover span { visibility: visible; line-height:20px; } 

Tratar

 .spoiler{ display:none; } .spoiler:hover { display:block; }