Pourquoi mon texte de spoiler ne s'affiche-t-il pas au survol ?

Dépannage des problèmes de visibilité CSS pour les éléments de spoiler

Lors de l'utilisation de la propriété de visibilité en CSS pour créer des éléments de spoiler, certains utilisateurs peuvent rencontrer des difficultés avec le le texte reste invisible même lorsque vous le survolez. Ce problème peut provenir du fait que le survol nécessite un élément visible pour interagir avec.

Pour résoudre ce problème, une solution efficace consiste à imbriquer l'élément spoiler dans un autre conteneur. Cela permet au conteneur de recevoir l'événement de survol, même lorsque l'élément spoiler est initialement masqué. L'extrait de code mis à jour suivant illustre cette technique :

CSS :

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML :

Spoiler: <span>

Ce l'approche garantit que l'élément du conteneur devient visible lorsqu'il est survolé, déclenchant la visibilité du spoiler intérieur element.

Démo :
http://jsfiddle.net/DBXuv/

Remarque : Pour les navigateurs Chrome en particulier, les éléments suivants Un ajout peut améliorer la fonctionnalité :

.spoiler {
    outline: 1px solid transparent;
}

Cet ajout fournit un repère visuel pour indiquer la présence du spoiler, même lorsque le le texte initial est masqué.

Démo mise à jour :
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!