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.
: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 | État | Commentaires |
|---|---|---|
| HTML Living Standard La définition de ':hover' dans cette spécification. |
Standard évolutif | |
| Selectors Level 4 La définition de ':hover' dans cette spécification. |
Version de travail | Aucune modification significative. |
| Selectors Level 3 La définition de ':hover' dans cette spécification. |
Recommendation | Aucune modification significative. |
| CSS Level 2 (Revision 1) La définition de ':hover' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 1 | Oui | 1 | 4 | 4 | 2 |
<a> element support | 1 | Oui | 1 | 4 | 4 | 2 |
| All elements support | 1 | Oui2 | 1 | 73 4 | 7 | 2 |
| Pseudo-element support | ? | Oui | 28 | ? | ? | ? |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | ? | ? | Oui | ? | ? | Oui1 | ? |
<a> element support | ? | ? | ? | ? | ? | ? | ? |
| All elements support | ? | ? | ? | ? | ? | ? | ? |
| Pseudo-element support | ? | ? | ? | ? | ? | ? | ? |
1. 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.
2. 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.
3. 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.
4. 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.