MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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 tel 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 tot :link:visited:hover:active.

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 gallerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.

Spécifications

Spécification État Commentaires
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 Firefox (Gecko) Edge Internet Explorer Opera Safari
Pour les éléments <a> 0.2 1.0 (1.7 ou moins) (Oui) 4.0 4.0

2.0.4 (419)

Pour tous les éléments 0.2 1.0 (1.7 ou moins) (Oui) 7.0 [1][2] 7.0 2.0.4 (419)
Pour les pseudo-éléments ? (Oui) 28 (28) ? ? ?
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple ? ? (Oui) ? ? ?[3]

[1]Différents bugs avant

[2] Dans IE8-11, survoler un élément puis faire dérouler la page sans déplacer le pointeur laissera l'élément dans l'état :hover jusqu'à ce que le pointeur soit déplacé. Voir bogue IE 926665.

Dans IE9 (et peut-être même avant), si un élement <table> a un parent avec width avec une valeur non-auto et overflow-x: auto;, et que l'élément <table> contient assez de contenu pour déclencher un retour à la ligne de son parent et que des styles :hover s'appliquent à des éléments dans l'élément table. Alors survoler ces éléments induira une augmentation de la hauteur de l'élément <table>. Voici une démonstration qui déclenche ce bogue. Il est possible de contourner ce bogue en spécifiant min-height: 0%; sur l'élément parent de l'élément <table> (l'unité % doit être spécifiée, les valeur 0 et 0px ne règlent pas le problème). Pour avoir plus de détails, référez-vous au ticket jQuery #10854.

[3] Concernant Safari Mobile pour iOS 7.1.2, tapoter sur un élément cliquable induit son passage à l'état :hover. L'élément restera dans l'état :hover jusqu'à ce qu'un autre élément passe dans l'état :hover.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, FredB, teoli, tregagnon, ThePrisoner, tcit
 Dernière mise à jour par : SphinxKnight,