Pseudo-classe CSS :hover – Syntaxe, exemples et conseils

La pseudo-classe :hover correspond à un élément lorsque le pointeur de l'utilisateur est positionné dessus. Elle s'active dès que le pointeur entre sur l'élément et se désactive dès qu'il le quitte — aucun clic n'est nécessaire.

Cette page aborde :

La syntaxe de base et la façon de cibler les liens, les boutons et n'importe quel élément
La combinaison de :hover avec transition pour des effets animés fluides
Le survol d'un parent pour révéler ou restyliser ses enfants (modèle de menu déroulant)
La limitation des styles de survol avec @media (hover: hover) pour la sécurité sur les appareils tactiles
Les exigences d'accessibilité et le couplage avec :focus / :focus-within

Syntaxe

selector:hover {
  /* declarations applied while pointer is over the element */
}

Le sélecteur peut être n'importe quel sélecteur CSS valide — élément, classe, ID ou une chaîne de combinateurs.

Styliser les liens au survol

L'utilisation la plus courante de :hover consiste à modifier l'apparence des liens d'ancrage. Pour un style de lien prévisible, déclarez les règles dans l'ordre LVHA : :link, :visited, :hover, :active. Cet ordre garantit que les pseudo-classes ultérieures peuvent supplanter les précédentes sans surprises de spécificité.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:hover {
        background-color: #8ebf42;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>

Essayez vous-même »

Déplacez votre pointeur sur le lien pour voir la couleur d'arrière-plan et la couleur du texte changer.

Survol sur des liens texte en ligne

Lorsqu'un lien apparaît à l'intérieur d'un paragraphe, :hover cible uniquement cet élément <a> — le texte environnant n'est pas affecté.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
      a:hover {
        background-color: #555;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
  </body>
</html>

Essayez vous-même »

Survol des éléments de type bloc

:hover fonctionne sur n'importe quel élément, pas seulement sur les liens. L'appliquer à une <div> permet de créer des effets de carte ou de panneau interactifs.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 30px;
        background-color: #8ebf42;
        color: #eee;
      }
      div:hover {
        background-color: #444;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <div>
      Lorem ipsum is simply dummy text...
    </div>
  </body>
</html>

Essayez vous-même »

Effets de survol fluides avec transition

Une règle :hover simple change les styles instantanément. L'ajout d'une transition sur le sélecteur de base (et non dans la règle :hover) amène le navigateur à animer le changement dans les deux sens — lorsque le pointeur entre et lorsqu'il sort.

.button {
  background-color: #1c87c9;
  color: #fff;
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* Place transition on the base rule, not :hover */
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.button:hover {
  background-color: #145e8a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Si vous placez transition uniquement à l'intérieur de la règle :hover, l'animation joue lors de l'entrée mais revient brusquement à la sortie — une erreur courante chez les débutants.

Vous pouvez effectuer la transition de plusieurs propriétés en les séparant par des virgules, ou utiliser transition: all 0.25s ease comme raccourci (bien que cibler des propriétés spécifiques soit meilleur pour les performances).

Survol d'un parent pour styliser ses enfants

:hover peut faire partie d'un sélecteur combinateur pour réagir à l'état de survol d'un parent et styliser un descendant. C'est le fondement des menus de navigation déroulants et des effets de révélation au survol.

/* Card image starts dimmed; brightens when the card is hovered */
.card .card-image {
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.card:hover .card-image {
  opacity: 1;
}

/* Reveal an overlay label on hover */
.card .card-label {
  display: none;
}

.card:hover .card-label {
  display: block;
}

.nav-item .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.nav-item:hover .dropdown {
  display: block;
}

Avertissement

Les menus accessibles uniquement au survol ne sont pas accessibles aux utilisateurs au clavier et aux utilisateurs tactiles. Associez :hover à :focus-within pour que le menu s'ouvre également lorsqu'un élément enfant reçoit le focus via la navigation au clavier :

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  display: block;
}

Limiter les styles de survol pour les appareils tactiles

De nombreux appareils à écran tactile déclenchent un survol simulé au toucher, ce qui peut laisser des styles « bloqués » jusqu'à ce que l'utilisateur touche ailleurs. Pour éviter cela, encapsulez les règles spécifiques au survol dans une requête média qui vérifie si le dispositif d'entrée principal prend véritablement en charge le survol :

/* Only apply on devices with a real pointer (mouse, trackpad) */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
}

La fonctionnalité média hover: hover est largement prise en charge dans les navigateurs modernes. Sur les appareils uniquement tactiles, le bloc est simplement ignoré, de sorte que vos styles de base restent propres.

Vous pouvez également la combiner avec pointer: fine pour cibler les dispositifs de pointage précis (souris/pavé tactile) tout en excluant les dispositifs grossiers (tactile) :

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: #145e8a;
  }
}

Accessibilité : associer :hover à :focus

Les utilisateurs au clavier naviguent avec la touche Tab, qui déclenche :focus plutôt que :hover. Si vos styles de survol transmettent un retour visuel important (comme la mise en évidence de l'élément de navigation actif), appliquez les mêmes styles à :focus afin que les utilisateurs au clavier reçoivent un retour équivalent :

/* Always pair hover and focus for interactive elements */
a:hover,
a:focus {
  outline: 2px solid #1c87c9;
  outline-offset: 2px;
  text-decoration: underline;
}

Pour les composants composites (comme une carte contenant un bouton), :focus-within vous permet de styliser le parent chaque fois qu'un enfant reçoit le focus :

.card:hover,
.card:focus-within {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Info

De nombreux appareils tactiles ne déclenchent pas d'état :hover persistant ; le toucher d'un élément déclenche généralement :active ou :focus à la place. Testez toujours les modèles de survol interactifs sur un vrai appareil tactile ou avec l'émulation tactile.

Effets de survol sur d'autres propriétés

:hover n'est pas limité aux couleurs. Toute propriété CSS animable peut être activée ou soumise à une transition au survol :

Propriété	Effet de survol typique
`opacity`	Fondu en entrée/sortie pour les superpositions ou l'interface secondaire
`transform`	Mise à l'échelle, translation ou rotation d'un élément
`box-shadow`	Ajout de profondeur aux cartes et aux boutons
`color`	Changement de la couleur du texte ou des icônes
`cursor`	Signaler qu'un élément est interactif

Bonnes pratiques

Associez :hover à :focus afin que les utilisateurs au clavier reçoivent le même retour visuel : a:hover, a:focus { ... }.
Limitez les animations de survol derrière @media (hover: hover) pour éviter les états bloqués sur les appareils tactiles.
Placez transition sur la règle de base, et non à l'intérieur de :hover, pour que l'animation s'applique dans les deux sens.
N'affichez pas de contenu essentiel uniquement au survol — il est invisible pour les utilisateurs tactiles et peut être ignoré par les lecteurs d'écran.
Associez les menus de survol à :focus-within pour que la navigation au clavier puisse les ouvrir sans souris.
Respectez l'ordre LVHA lors du stylage des liens : :link, :visited, :hover, :active.

Compatibilité des navigateurs

:hover est pris en charge dans tous les navigateurs modernes et l'est depuis IE 7 pour la plupart des éléments (IE 6 ne le prenait en charge que pour les balises <a>). La requête de fonctionnalité @media (hover: hover) est prise en charge dans Chrome 41+, Firefox 64+, Safari 9+ et Edge 79+.

Pratique

Quel est le but du sélecteur :hover en CSS ?

Il permet de faire glisser le texte.Il permet d'appliquer des transformations spectaculaires aux éléments HTML.Il permet de spécifier un état particulier d'un élément.Il permet de styliser un élément lorsque vous le survolez avec la souris.Il permet d'aligner le texte dans une direction spécifique.

Syntaxe

Styliser les liens au survol

Survol sur des liens texte en ligne

Survol des éléments de type bloc

Effets de survol fluides avec transition

Survol d'un parent pour styliser ses enfants

Modèle de menu déroulant

Limiter les styles de survol pour les appareils tactiles

Accessibilité : associer :hover à :focus

Effets de survol sur d'autres propriétés

Bonnes pratiques

Compatibilité des navigateurs

Pratique