Comment puis-je faire persister un état de survol CSS après le déplacement de la souris ?

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

Dans la conception Web, l'état de survol permet aux éléments d'une page de se transformer lorsqu'un utilisateur survole eux. Cependant, dans certains cas, il est souhaitable que l'état de survol persiste même après que la souris de l'utilisateur quitte l'élément.

Considérez l'extrait de code suivant :

#about {
  height: 25px;
  width: 84px;
  background-image: url('about.png');
  position: absolute;
  top: 200px;
  left: 0px;
}

#onabout {
  height: 200px;
  width: 940px;
  position: absolute;
  top: 60px;
  left: 0px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 300;
  display: none;
}

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

Ce code utilise le :hover pseudo-classe pour afficher un élément (#onabout) lorsque la souris survole un autre élément (#about). Cependant, lorsque l'utilisateur éloigne la souris de #about, #onabout disparaît.

Pour faire persister l'état de survol, CSS propose plusieurs options. Une approche consiste à introduire une propriété de transition :

#about {
  ...
  transition: 0.2s ease;
}

#about:hover #onabout {
  transition: 0.2s ease;
  opacity: 1;
}

Ce code ajoute un effet de transition en douceur lorsque vous survolez et vous éloignez de #about. La propriété opacity est également modifiée pour garantir que #onabout reste visible après que la souris quitte #about.

Une autre approche consiste à utiliser la pseudo-classe :active :

#about {
  ...
  cursor: pointer;
}

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

#about:active #onabout {
  opacity: 1;
  transition: 0.2s ease;
}

Ce code ajoute un curseur pour indiquer que #about est cliquable et utilise :active pour maintenir l'état de survol lorsque l'on clique sur l'élément. La transition garantit une expérience visuelle fluide.

Enfin, pour ceux qui recherchent une solution plus avancée, CSS3 fournit la propriété animation-play-state :

#onabout {
  display: block;
  animation-name: hover;
  animation-play-state: paused;
}

#about:hover #onabout {
  animation-play-state: running;
}

Ce code introduit une animation avec le @keyframes survole la déclaration et la met en pause par défaut. Lorsque l'utilisateur survole #about, animation-play-state est défini sur running, démarrant l'animation et conservant l'état de survol même après que la souris quitte l'élément.

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!