:hover

Résumé

La pseudo-classe CSS :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur passe la souris dessus, mais sans nécessairement l'activer. Ce style peut être écrasé par d'autres pseudo-classes liées aux liens, comme :link, :visited, et :active, apparaissant dans des règles subséquentes. Pour décorer les liens tel que souhaité, vous devez mettre la règle :hover après les règles :link et :visited mais avant la règle :active, comme défini par l'ordre LVHA. :link:visited:hover:active.

Les navigateurs visuels, comme Firefox, Internet Explorer, Safari, Opera ou Chrome, appliquent les décorations lorsque le curseur (le pointeur de la souris) passe au-dessus d'un élément.

On rencontre principalement cette pseudo-classe avec l'élément HTML <a> mais cela fonctionne aussi avec d'autres éléments HTML.

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é poour les utilisateurs de tels appareils.

Exemple

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Grâce à la pseudo-classe :hover vous pouvez créer des algorithmes de cascade complexes. Cette technique est courante, par exemple, pour créer des menus déroulants utilisant seulement CSS (pas besoin d'utiliser JavaScript pour ce genre de menus). L'essence de cette technique est l'utilisation de règles telles que la suivante :

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

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

qui sont appliquées à une structure HTML telle que la suivante :

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

Voyez notre exemple complet de menus déroulants en CSS pour plus d'informations.

Gallerie avec des images de pleine dimension et des aperçus

Vous pouvez utiliser la pseudo-classe :hover pour créer une gallerie d'images affichant des images de pleine dimensions seulement lorsque la souris passe au-dessus des miniatures. Voyez cette démonstration pour plus d'informations.

Note : pour un effet analogue, mais fondé sur la pseudo-classe :checked (appliquée à des case à cocher cachées), voyez cette démonstration, extraite de la page :checked.

Spécifications

Spécification Statut Commentaire
Selectors Level 4 Working Draft Pas de changement significatif.
Selectors Level 3 Recommendation Pas de changement significatif.
CSS Level 2 (Revision 1) Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Pour les éléments <a> 0.2 1.0 (1.7 ou moins) 4.0 4.0 2.0.4 (419)
différents bogues avant
Pour tous les éléments 0.2 1.0 (1.7 ou moins) 7.0 7.0 2.0.4 (419)
différents bogues avant
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ?

 

Pièces jointes

Fichier Taille Date Joint par
css_dropdown_menu.html
7249 octets 2012-05-16 11:01:54 fusionchess
css-gallery.zip
141984 octets 2012-05-29 10:54:11 fusionchess
css-checked-gallery.zip
142124 octets 2012-05-30 10:24:35 fusionchess
tool icon
1828 octets 2013-09-27 10:59:34 chrisdavidmills

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : the prisoner, tregagnon, tcit, FredB
Dernière mise à jour par : tregagnon,
Masquer la barre latérale