Pourquoi ma visibilité CSS ne fonctionne-t-elle pas sur les éléments cachés survolés ?

La visibilité CSS ne fonctionne pas : dépannage et solution

La classe "spoiler" en CSS est destinée à révéler du texte caché lors du survol de la souris , mais pour une raison quelconque, le texte reste invisible. Pour résoudre ce problème, nous devons comprendre pourquoi la visibilité ne fonctionne pas dans ce contexte.

Le problème survient car vous ne pouvez pas survoler un élément masqué. Lorsque la visibilité est définie sur masqué, l'élément et son contenu sont effectivement invisibles aux événements de la souris, y compris le survol de la souris.

Pour résoudre ce problème, une solution consiste à imbriquer l'élément masqué dans un autre élément conteneur. Cela permettra de survoler le conteneur extérieur, déclenchant le changement de visibilité de l'élément imbriqué :

CSS :

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML :

Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>

Cette approche garantit que l'élément imbriqué reste caché jusqu'à ce que la souris survole l'élément extérieur. conteneur.

De plus, dans Chrome, vous pouvez ajouter un contour à l'élément masqué pour faciliter l'interaction avec :

.spoiler {
    outline: 1px solid transparent;
}

Ce code mis à jour permet de basculer plus facilement la visibilité en survolant le contour de l'élément caché.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!