:hover

La pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.

/* Cible n'importe quel élément <a> lorsque  */
/* celui-ci est survolé */
a:hover {
  background-color: gold;
}

La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme :link, :visited, et :active, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle :hover après les règles :link et :visited mais avant la règle :active (l'ordre est  :link — :visited — :hover — :active – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle :focus est indifférent.

La pseudo-classe :hover peut être appliquée à n'importe quel pseudo-élément.

Syntaxe

:hover

Exemples

CSS

a:hover {
  background-color: gold;
}

HTML

<p>
  <a href="#">Ce lien sera écrit sur un fond doré lors du survol.</a>
</p>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Bogue Chromium #370155 : Don't make :hover sticky on tap on sites that set a mobile viewport
• Bogue Chromium #306581 : Immediately show hover and active states on touch when page isn't scrollable