: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.

Note d'utilisation : sur les écrans tactiles, :hover est problématique voire impossible. La pseudo-classe :hover n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.

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

Note : On peut utiliser la pseudo-classe :checked dans une galerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.

Spécifications

Spécification	Commentaires	Retours
HTML Living Standard La définition de ':hover' dans cette spécification.		Issues GitHub du WHATWG HTML (en anglais)
Selectors Level 4 La définition de ':hover' dans cette spécification.	Permet d'appliquer `:hover` à n'importe quel pseudo-élément.	Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
Selectors Level 3 La définition de ':hover' dans cette spécification.
CSS Level 2 (Revision 1) La définition de ':hover' dans cette spécification.	Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`:hover`	Chrome Support complet 1	Edge Support complet 12	Firefox Support complet 1	IE Support complet 4	Opera Support complet 4	Safari Support complet 2	WebView Android Support complet 37	Chrome Android Support complet 18	Firefox Android Support complet 4	Opera Android Support complet 10.1	Safari iOS Support complet 1 Notes Support complet 1 Notes Notes As of Safari for iOS 7.1.2, tapping a clickable element causes the element to enter the `:hover` state. The element will remain in the `:hover` state until a different element has entered the `:hover` state.	Samsung Internet Android Support complet 1.0
`<a>` element support Non-standard	Chrome Support complet 1	Edge Support complet 12	Firefox Support complet 1	IE Support complet 4	Opera Support complet 4	Safari Support complet 2	WebView Android Support complet 37	Chrome Android Support complet 18	Firefox Android Support complet 4	Opera Android Support complet 10.1	Safari iOS Support complet 1	Samsung Internet Android Support complet 1.0
All elements support Non-standard	Chrome Support complet 1	Edge Support complet 12 Notes Support complet 12 Notes Notes In Edge, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the `:hover` state until the pointer is moved. See bug 5381673.	Firefox Support complet 1	IE Support complet 7 Notes Support complet 7 Notes Notes In Internet Explorer 8 to Internet Explorer 11, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the `:hover` state until the pointer is moved. See bug 926665. Notes In Internet Explorer 9 (and possibly earlier), if a `<table>` has a parent with a non-`auto` `width`, `overflow-x: auto;`, the `<table>` has enough content to horizontally overflow its parent, and there are `:hover` styles set on elements within the table, then hovering over said elements will cause the `<table>`'s height to increase. See a live demo that triggers the bug. One workaround for the bug is to set `min-height: 0%;` (the `%` unit must be specified, since unitless and `px` don't work) on the `<table>`'s parent element.	Opera Support complet 7	Safari Support complet 2	WebView Android Support complet 37	Chrome Android Support complet 18	Firefox Android Support complet 4	Opera Android Support complet 10.1	Safari iOS Support complet 1	Samsung Internet Android Support complet 1.0
Pseudo-element support	Chrome Support complet 1	Edge Support complet 12	Firefox Support complet 28	IE Support complet 11	Opera Support complet 15	Safari Support complet 2	WebView Android Support complet ≤37	Chrome Android Support complet 18	Firefox Android Support complet 28	Opera Android Support complet 14	Safari iOS Support complet 1	Samsung Internet Android Support complet 1.0

Légende

Support complet: Support complet
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.: Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.: Voir les notes d'implémentation.

Voir aussi

Dernière modification : Apr 25, 2019, par des contributeurs MDN