Comment puis-je garder un état de survol CSS actif après avoir éloigné le curseur ?

Maintenir l'état de survol CSS après le "Unhovering" : le point de vue d'un débutant

En tant que concepteur de sites Web en herbe, vous pouvez rencontrer des défis avec les états de survol CSS . Bien que l'effet de survol affiche de manière transparente une image au survol, vous pourriez être confronté au dilemme de sa disparition lorsque l'utilisateur s'éloigne de l'élément. Cet article aborde ce problème en guidant les débutants à travers des solutions CSS uniquement.

L'extrait de code fourni démontre l'utilisation du sélecteur de survol (#about:hover) pour déclencher l'affichage de #onabout. Cependant, une fois l'effet de survol cesse, #onabout revient à son état caché initial.

Pour résoudre ce problème, nous explorons une technique CSS élégante : transition-delay.

Utilisation du délai de transition :

Ajoutez une propriété de délai de transition à l'élément qui déclenche le survol état (dans ce cas, #about). Ce délai donne à l'effet de survol un temps tampon avant que la transition vers l'état d'origine ne se produise. Voici un exemple d'extrait de code :

#about:hover #onabout {
  display: block;
  transition-delay: 180s;
}

En définissant un délai de transition élevé (par exemple, 180 secondes), vous prolongez essentiellement la durée pendant laquelle l'état de survol reste même après le déplacement du curseur. Cela donne à l'utilisateur suffisamment de temps pour absorber visuellement l'image révélée.

Conclusion :

L'utilisation des états de survol CSS est un moyen puissant d'améliorer votre conception Web. En incorporant un délai de transition, vous pouvez garantir que vos états de survol persistent au-delà de l'action initiale de l'utilisateur, offrant ainsi une expérience utilisateur plus attrayante.

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!