Revelando el misterio: por qué falla la visibilidad de CSS al pasar el mouse

La visibilidad de CSS ofrece una manera conveniente de manipular la visibilidad de los elementos, pero a veces se topa obstáculos inesperados. Considere un escenario en el que ha definido una clase de "spoiler" para hacer que el texto sea invisible inicialmente y revelarlo al pasar el mouse. A pesar de sus expectativas, el texto persiste obstinadamente en su estado oculto, desafiando sus esfuerzos de desplazamiento.

Profundizando en la causa

El culpable detrás de este comportamiento desconcertante radica en la naturaleza de elementos ocultos. Cuando un elemento se oculta mediante visibilidad: oculto, efectivamente se vuelve invisible y no consume espacio en el diseño de la página. Esto significa que intentar flotar sobre él es esencialmente como intentar interactuar con el vacío. El elemento simplemente no registra la acción de flotar.

Resolviendo el dilema de la visibilidad

Para superar este obstáculo, debe proporcionarle al elemento una manera de permanecer visible incluso cuando su contenido esté oculto. Un enfoque consiste en anidar el elemento dentro de otro contenedor que pueda recibir el evento de desplazamiento. Así es como puedes lograr esto:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: E.T. phones home.

Explicación:

Al anidar el texto oculto dentro de un elemento span, te aseguras de que el elemento de spoiler exterior permanezca visible , permitiéndole capturar el evento de desplazamiento. Cuando se produce el desplazamiento, el elemento de intervalo interno se vuelve visible, revelando el texto del spoiler.

Consideraciones adicionales

En ciertos navegadores como Chrome, puedes encontrar un pequeño problema al el elemento de spoiler oculto todavía se puede seleccionar ligeramente con el mouse. Para solucionar este problema, puede agregar un esquema al elemento spoiler:

.spoiler {
    outline: 1px solid transparent;
}

Este esquema transparente garantiza que el elemento de spoiler tenga el tamaño suficiente para recibir el evento de desplazamiento sin obstaculizar la visibilidad general del texto.

Con estos ajustes, su clase de spoiler funcionará perfectamente, preservando la invisibilidad del texto oculto y proporciona una experiencia de desplazamiento fluida.