mozilla
Vos résultats de recherche

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

    La pseudo-classe :hover peut être appliquée à n'importe quel pseudo-élément.

    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.

    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.

    Exemples

    :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
    La définition de ':hover' dans cette spécification.
    Version de travail Pas de changement significatif.
    Selectors Level 3
    La définition de ':hover' dans cette spécification.
    Recommendation Pas de changement significatif.
    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) 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 ? ? ? ? ?

    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 également:

    Étiquettes et contributeurs liés au document

    Contributors to this page: the prisoner, tregagnon, tcit, teoli, FredB
    Dernière mise à jour par : FredB,