Dévoilement du mystère : pourquoi la visibilité CSS échoue au survol

La visibilité CSS offre un moyen pratique de manipuler la visibilité des éléments, mais elle tombe parfois sur des obstacles inattendus. Considérons un scénario dans lequel vous avez défini une classe « spoiler » pour rendre le texte invisible initialement et le révéler au survol de la souris. Malgré vos attentes, le texte persiste obstinément dans son état caché, défiant vos efforts de survol.

Plonger dans la cause

Le coupable derrière ce comportement déroutant réside dans la nature d'éléments cachés. Lorsqu'un élément est masqué à l'aide de visibilité:hidden, il devient effectivement invisible et ne consomme aucun espace dans la mise en page. Cela signifie qu’essayer de le survoler revient essentiellement à essayer d’interagir avec le vide. L'élément n'enregistre tout simplement pas l'action de survol.

Résoudre le dilemme de la visibilité

Pour surmonter cet obstacle, vous devez fournir à l'élément un moyen de rester visible. même lorsque son contenu est masqué. Une approche consiste à imbriquer l'élément dans un autre conteneur pouvant recevoir l'événement de survol. Voici comment y parvenir :

CSS :

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML :

Spoiler: E.T. phones home.

Explication :

En imbriquant le texte masqué dans un élément span, vous vous assurez que l'élément spoiler externe reste visible , lui permettant de capturer l'événement de survol. Lorsque le survol se produit, l'élément span interne devient visible, révélant le texte du spoiler.

Considérations supplémentaires

Dans certains navigateurs comme Chrome, vous pouvez rencontrer un léger problème où l'élément de spoiler caché est encore légèrement sélectionnable avec la souris. Pour résoudre ce problème, vous pouvez ajouter un contour à l'élément spoiler :

.spoiler {
    outline: 1px solid transparent;
}

Ce contour transparent garantit que l'élément spoiler a une taille suffisante pour recevoir l'événement de survol sans gêner la visibilité globale du texte.

Avec ces ajustements, votre classe spoiler fonctionnera parfaitement, préservant l'invisibilité du texte caché et offrant une expérience de survol transparente.