Pourquoi ne puis-je pas survoler un élément masqué : une énigme de visibilité CSS ?

Dépannage des éléments cachés : dilemme de visibilité CSS

Dans une quête de prouesses en matière de dissimulation des spoilers, vous avez implémenté une classe "spoiler" tirant parti la propriété de visibilité CSS. Cependant, vos efforts se sont heurtés à un obstacle inattendu : les spoilers restent cachés en survol. Examinons le problème et trouvons une solution.

Le défi de l'invisibilité en survol

La propriété de visibilité CSS, comme vous l'aviez prévu, rend l'élément masqué. Cependant, une mise en garde cruciale apparaît : une fois qu'un élément est masqué, il entre dans un état dans lequel il ne peut recevoir aucune entrée, y compris les événements de survol. Cela pose un dilemme, car survoler l'élément caché est précisément le déclencheur de la révélation du spoiler.

Une solution créative : les éléments imbriqués

Pour surmonter cette barrière, nous Je vais utiliser une technique de nidification intelligente. En plaçant le texte du spoiler dans un élément, nous pouvons cibler et basculer de manière sélective sa visibilité tout en maintenant l'interaction de survol sur le conteneur externe.

Structure CSS et HTML mise à jour

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

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

Démo et amélioration spécifique à Chrome

Découvrez la démonstration en direct ici : http://jsfiddle.net/DBXuv/. Vous remarquerez que le texte du spoiler apparaît désormais au survol.

Pour les utilisateurs de Chrome, une règle CSS supplémentaire peut améliorer l'accessibilité :

.spoiler {
    outline: 1px solid transparent;
}

Ce contour ajoute une indication visuelle subtile de l'élément masqué. présence, permettant aux utilisateurs de découvrir plus facilement le contenu du spoiler.

Démo mise à jour avec l'amélioration de Chrome : http://jsfiddle.net/DBXuv/148/.

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!