: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
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:hoverChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 4Safari Support complet 2WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? 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 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 4Safari Support complet 2WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
All elements support
Non-standard
Chrome Support complet 1Edge 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 1IE 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 7Safari Support complet 2WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
Pseudo-element supportChrome Support complet 1Edge Support complet 12Firefox Support complet 28IE Support complet 11Opera ? Safari Support complet 2WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 28Opera Android ? Safari iOS Support complet 1Samsung 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.

Voir aussi

Sujets associés
  1. CSS
  2. Référence CSS
  3. CSS Selectors
  4. Guides
    1. Utiliser la pseudo-classe :target dans un sélecteur
  5. Propriétés
    1. Liste de sélecteurs
  6. Sélecteurs simples
    1. Sélecteurs de type
    2. Sélecteurs de classe
    3. Sélecteurs d'ID
    4. Sélecteurs universels
    5. Sélecteurs d'attribut
  7. Combinateurs
    1. Combinateur de voisin direct
    2. Sélecteurs de voisins généraux
    3. Sélecteurs enfant
    4. Sélecteurs descendant
    5. Combinateur de colonne
  8. Pseudo-classes
    1. :active
    2. :any-link
    3. :checked
    4. :blank
    5. :default
    6. :defined
    7. :dir
    8. :disabled
    9. :empty
    10. :enabled
    11. :first
    12. :first-child
    13. :first-of-type
    14. :fullscreen
    15. :focus
    16. :focus-visible
    17. :focus-within
    18. :has
    19. :host()
    20. :host-context()
    21. :hover
    22. :indeterminate
    23. :in-range
    24. :invalid
    25. :is() (:matches(), :any())
    26. :lang
    27. :last-child
    28. :last-of-type
    29. :left
    30. :link
    31. :not
    32. :nth-child
    33. :nth-last-child
    34. :nth-last-of-type
    35. :nth-of-type
    36. :only-child
    37. :only-of-type
    38. :optional
    39. :out-of-range
    40. :placeholder-shown
    41. :read-only
    42. :read-write
    43. :required
    44. :right
    45. :root
    46. :scope
    47. :target
    48. :valid
    49. :visited
    50. :where()
  9. Pseudo-éléments
    1. ::-moz-progress-bar
    2. ::-moz-range-progress
    3. ::-moz-range-thumb
    4. ::-moz-range-track
    5. ::-ms-browse
    6. ::-ms-check
    7. ::-ms-clear
    8. ::-ms-expand
    9. ::-ms-fill
    10. ::-ms-fill-lower
    11. ::-ms-fill-upper
    12. ::-ms-reveal
    13. ::-ms-thumb
    14. ::-ms-ticks-after
    15. ::-ms-ticks-before
    16. ::-ms-tooltip
    17. ::-ms-track
    18. ::-ms-value
    19. ::-webkit-progress-bar
    20. ::-webkit-progress-value
    21. ::-webkit-slider-runnable-track
    22. ::-webkit-slider-thumb
    23. ::after (:after)
    24. ::backdrop
    25. ::before (:before)
    26. ::cue
    27. ::first-letter
    28. ::first-line (:first-line)
    29. ::grammar-error
    30. ::marker
    31. ::part()
    32. ::placeholder
    33. ::selection
    34. ::slotted()
    35. ::spelling-error