Pourquoi mon effet de survol ne fonctionne-t-il pas sur les éléments avec « visibilité : cachée » en CSS ?

La visibilité ne fonctionne pas en CSS : voici pourquoi et comment y remédier

Dans le style CSS, l'ambiguïté peut parfois conduire à des résultats inattendus. Explorons un problème courant rencontré lors de la tentative de masquage de texte avec la propriété « visibilité ».

Problème :

Votre CSS se lit comme suit :

.spoiler {
    visibility: hidden;
}

.spoiler:hover {
    visibility: visible;
}

Selon cette configuration, survoler le texte avec la classe '.spoiler' devrait le révéler. Cependant, cela ne se produit pas, laissant le texte invisible quelle que soit la position de la souris.

Raison :

Le problème réside dans le comportement par défaut des éléments masqués. Les éléments avec « visibilité : masquée » ne sont pas reconnus par l'agent utilisateur lors des événements de souris, y compris le survol. Par conséquent, l'état de survol n'est jamais activé.

Solution 1 : Imbriquer les éléments

Pour surmonter ce défi, on peut imbriquer le texte du spoiler dans un autre élément :

CSS :

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML :

Spoiler: <span>

Cette solution fonctionne car l'élément span imbriqué avec la visibilité masquée initialement bloque les événements de la souris. Cependant, lorsque l'élément parent '.spoiler' reçoit l'événement de survol, il active et révèle l'élément span, rendant le texte visible.

Solution 2 (Chrome uniquement) : astuce de contour

Une approche alternative pour Chrome consiste à ajouter un contour à l'élément « .spoiler » :

.spoiler {
    outline: 1px solid transparent;
}

Cette technique crée une hitbox invisible qui répond aux événements de la souris, permettant aux effets de survol de fonctionner correctement. sur les éléments cachés.

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!