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

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

Dans la conception Web, l'état de survol est souvent utilisé pour révéler du contenu ou des effets supplémentaires lors du survol sur un élément. Cependant, cet état disparaît généralement lorsque le pointeur de la souris quitte l'élément. Cet article explore une solution CSS pour maintenir l'état de survol même après le « reprise du survol ».

Le problème

De nombreux débutants sont confrontés au défi de préserver l'état de survol. Par exemple, considérons l'exemple de code suivant :

#about:hover #onabout {
  display: block;
}

Lorsque vous survolez l'élément #about, l'élément #onabout devient visible. Cependant, il disparaît dès la fin de l'état de survol.

Solution CSS

Heureusement, CSS fournit une solution utilisant le délai de transition. Cette propriété spécifie le temps d'attente avant d'appliquer les transitions CSS. En le définissant sur une valeur non nulle, nous pouvons maintenir l'état de survol pendant un certain temps après le survol.

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

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

Ce code garantit que l'image (img) reste visible pendant 180 secondes après le survol.

Approche alternative

Une autre technique CSS consiste à utiliser la transformation et le focus pour faire disparaître l'image après en cliquant.

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

Cette approche nécessite l'ajout de tabindex au élément dans le balisage HTML et en cliquant sur l'image pour déclencher l'effet de fondu.

En employant ces techniques CSS, vous pouvez maintenir l'état de survol même après l'arrêt du survol, améliorant ainsi l'expérience utilisateur sur vos pages Web.

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!