:hover en CSS : l'effet au survol et son piège sur mobile

Le survol est la première interaction qu'un visiteur découvre sur un site, bien avant le clic. La pseudo-classe :hover donne à CSS le pouvoir de réagir à ce simple passage de la souris, sans une seule ligne de JavaScript.

C'est l'un des tout premiers outils qu'on apprend en CSS, et il reste l'un des plus utilisés, que ce soit pour changer une couleur, révéler un menu ou simplement confirmer qu'un élément est cliquable.

Définition

La pseudo-classe :hover cible un élément pendant que le pointeur de la souris est positionné au-dessus de lui. Le style associé s'applique tant que le pointeur reste sur l'élément et disparaît dès qu'il s'en éloigne.

Exemple concret

.bouton {
  background-color: #2d6cdf;
  color: white;
  transition: background-color 0.2s ease;
}
.bouton:hover {
  background-color: #1a4fb3;
}

Ici, la couleur de fond change au survol, et la propriété transition adoucit ce changement au lieu de le rendre instantané et brutal. C'est cette combinaison, un état plus une transition, qui donne l'impression d'une interface réactive et soignée.

Le piège du tactile

Sur un ordinateur, :hover fonctionne exactement comme prévu, puisqu'une souris permet de survoler un élément sans cliquer dessus. Sur un écran tactile, ce concept n'existe pas vraiment : il n'y a pas de position intermédiaire entre "ne pas toucher" et "toucher". Les navigateurs mobiles simulent parfois :hover au premier tap, ce qui provoque un comportement étrange, comme un menu qui semble s'ouvrir tout seul ou un style qui reste bloqué après le clic.

Que faire sur mobile à la place

Puisque :hover n'a pas d'équivalent fiable au toucher, il faut prévoir une alternative dès la conception de l'interface plutôt que de la rajouter après coup. Sur les cartes cliquables, un léger changement d'apparence au tap, via :active, confirme que l'appui a bien été pris en compte. Sur les menus qui s'ouvraient auparavant au survol, le tactile impose de basculer vers un clic ou un tap explicite, qui ouvre et ferme le menu, plutôt qu'un survol qui n'existe tout simplement pas sur ces appareils.

/* retour visuel au tap, utile sur mobile */
.carte:active {
  transform: scale(0.98);
}

/* le survol reste réservé aux appareils qui le supportent */
@media (hover: hover) {
  .carte:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

Cette double approche, un effet au tap pour tous les appareils et un effet au survol réservé aux pointeurs précis, couvre l'ensemble des visiteurs sans jamais sacrifier l'expérience sur l'un des deux supports.

Associer :hover à d'autres pseudo-classes

Le survol se combine naturellement avec d'autres Pseudo-classe, notamment :focus pour couvrir aussi la navigation au clavier, une pratique essentielle pour l'accessibilité. Le curseur affiché au survol peut aussi être ajusté avec la propriété cursor, par exemple pour indiquer visuellement qu'un élément est cliquable même s'il ne s'agit pas d'un lien classique. Sur les éléments qui ne doivent recevoir aucune interaction, pointer-events permet même de désactiver totalement le survol et le clic.

Questions fréquentes

Certains navigateurs mobiles appliquent temporairement l'état :hover au premier tap avant de déclencher le clic, ce qui donne l'impression que le style reste collé à l'élément quelques instants.

Oui, la media query hover: hover permet de ne styliser l'état de survol que sur les appareils qui disposent d'un pointeur précis, comme une souris, et de l'ignorer sur les écrans tactiles.

Ce n'est pas obligatoire, mais une transition courte, autour de 150 à 250 millisecondes, rend le changement d'état beaucoup plus agréable qu'un basculement instantané entre deux styles.