Comment puis-je conserver l'état de survol du CSS une fois que la souris a quitté l'élément ?

Préserver l'état de survol CSS après le "reprise du survol"

Dans la conception Web, l'état de survol est couramment utilisé pour afficher du contenu supplémentaire au survol de la souris. Cependant, par défaut, ce contenu disparaît lorsque le curseur de la souris quitte la zone spécifiée. Cet article présente une solution CSS pour garder l'état de survol visible après avoir "relevé" le curseur.

L'exemple fourni utilise la pseudo-classe ':hover' pour révéler une image lors du survol d'un div. Cependant, l'image disparaît à la fin de l'événement de survol. Pour résoudre ce problème, la technique CSS suivante peut être utilisée :

div img {
    position: absolute;
    opacity: 0;
    transition: 0s 180s;
}

div:hover img {
    opacity: 1;
    transition: 0s;
}

div {
    line-height: 1.2em;
    font-size: 1em;
    color: black;
    transition: 0s 180s;
}

div:hover {
    line-height: 0;
    font-size: 0;
    color: transparent;
    transition: 0;
}

Ce code utilise une combinaison de positionnement absolu, d'opacité et de transitions pour obtenir l'effet souhaité. L'opacité est initialement fixée à 0, rendant l'image invisible. Au survol, l'opacité est fixée à 1, révélant l'image. Pour empêcher le contenu de disparaître lors du « unhover », la propriété de transition est utilisée avec un délai de 180 secondes (3 minutes). Ce délai inhibe efficacement la transition d'opacité, gardant l'image visible indéfiniment.

Alternativement, il est également possible d'utiliser des événements de focus pour garantir que l'image reste visible lorsque vous cliquez dessus :

div:hover img:focus {
   opacity: 0;
   transition: 3s;
   -webkit-transform: rotate(-360deg) scale(0.23);
   -webkit-transform: rotate(-360deg) scale(0.23);
   -moz-transform: rotate(-360deg) scale(0.23);
   -o-transform: rotate(-360deg) scale(0.23);
   -ms-transform: rotate(-360deg) scale(0.23);
   transform: rotate(-360deg) scale(0.23);
}

Ce La variante utilise des événements de focus et des transitions pour faire disparaître et faire pivoter l'image après un clic, la gardant visible pendant la transition.

En implémentant ces techniques CSS, vous pouvez modifier le comportement de l'état de survol pour maintenir la visibilité du contenu souhaité même après que le curseur de la souris quitte la zone spécifiée.

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!