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

Les agents utilisateurs visuels comme Firefox, Internet Explorer, Safari, Opera ou Chrome, appliquent les décorations lorsque le curseur passe au-dessus d'un élément.

Syntaxe

:hover { style properties }

Exemples

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Menu déroulant

Grâce à la pseudo-classe :hover, il est possible de créer des algorithmes de cascade complexes. Cette technique est courante, par exemple, pour créer des menus déroulants uniquement construits avec CSS (pas besoin d'utiliser JavaScript pour ce genre de menus). Pour cela, on utilisera une feuille de style analogue à celle-ci :

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

Pour un document HTML contenant cette structure :

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Lien</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Sous-menu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Sous-menu</a>
              <ul>
                <li><a href="example.html">Lien</a></li>
                <li><a href="example.html">Lien</a></li>
                <li><a href="example.html">Lien</a></li>
                <li><a href="example.html">Lien</a></li>
              </ul>
            </li>
            <li><a href="example.html">Lien</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Résultat

Spécifications

Compatibilité des navigateurs

[1]Différents bugs avant

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.

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

• Bogue Chromium #370155 : Don't make :hover sticky on tap on sites that set a mobile viewport
• Bogue Chromium #306581 : Immediately show hover and active states on touch when page isn't scrollable