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 | 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
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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 ? | Safari iOS
Support complet
1
| Samsung Internet Android Support complet 1.0 |
<a> element support | 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 ? | Safari iOS Support complet 1 | Samsung Internet Android Support complet 1.0 |
All elements support | Chrome Support complet 1 | Edge
Support complet
12
| Firefox Support complet 1 | IE
Support complet
7
| 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 ? | 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 ? | Safari Support complet 2 | WebView Android Support complet ≤37 | Chrome Android Support complet 18 | Firefox Android Support complet 28 | Opera Android ? | Safari iOS Support complet 1 | Samsung Internet Android Support complet 1.0 |
Légende
- Support complet
- Support complet
- Compatibilité inconnue
- Compatibilité inconnue
- 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.