Docs CSS exécutables : Hover CSS

Q: Comment ajouter un effet de survol en CSS ?

Écrivez une règle avec :hover après le sélecteur : .btn:hover { background: #1d4ed8; }. Les déclarations s'appliquent tant que le pointeur est sur l'élément. Ajoutez transition: background 0.2s; à la règle normale pour animer le changement.

Q: Quelle est la différence entre :hover et :active ?

:hover s'applique pendant que le pointeur est sur l'élément. :active s'applique pendant qu'on appuie dessus, du bouton de souris enfoncé jusqu'au relâchement. Un bouton pressé est en général à la fois survolé et actif.

Q: Dans quel ordre écrire les pseudo-classes des liens ?

:link, :visited, :hover, :active (retenez LVHA, ou « LoVe HAte » en anglais). Elles ont la même spécificité, donc la dernière règle gagne ; dans un autre ordre, un style visité ou survolé peut masquer le style de survol ou actif.

Q: Comment changer la couleur d'un lien en CSS ?

Stylisez l'élément a : a { color: #2563eb; }, puis a:visited { color: #7c3aed; } et a:hover { color: #1d4ed8; } pour les autres états. Définir color sur a couvre à la fois les liens non visités et visités.

Comment fonctionne :hover

:hover est une pseudo-classe qui cible un élément pendant que le pointeur de la souris le survole. Ajoutez-la à n'importe quel sélecteur et écrivez les styles de l'état survolé :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

Seules les déclarations de la règle :hover changent ; tout le reste vient de .btn. Quand le pointeur s'en va, l'élément retrouve ses styles normaux.

Des effets de survol fluides avec transition

Un changement au survol est instantané, sauf si vous ajoutez transition à la règle normale (pas à la règle :hover), pour qu'il soit animé à l'aller comme au retour :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform et opacity sont les propriétés les moins coûteuses à animer ; elles ne déplacent pas les éléments voisins. Animer width, height ou margin recalcule la mise en page à chaque image. Les durées, délais et courbes d'accélération sont sur la page transition CSS.

Couleurs des liens : :link, :visited, :hover, :active

Les liens ont quatre états classiques, plus le focus clavier, et l'ordre des règles compte :

Pseudo-classe	S'applique quand
`:link`	Le lien n'a pas été visité
`:visited`	L'URL figure dans l'historique du navigateur
`:hover`	Le pointeur le survole
`:active`	On appuie dessus
`:focus-visible`	Il a le focus clavier

Elles ont toutes la même spécificité, donc la dernière règle gagne quand deux correspondent. Un lien visité et survolé correspond à :visited et à :hover ; si :visited vient en dernier, la couleur de survol ne s'affiche jamais. L'ordre sûr est Link, Visited, Hover, Active (LVHA) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

Les navigateurs limitent ce que :visited peut modifier, pour empêcher les pages de lire votre historique. Seules les propriétés liées à la couleur (color, background-color, border-color, outline-color et quelques autres) ont un effet, et les scripts voient toujours la valeur non visitée.

:active : l'état pressé

:active cible l'élément pendant qu'on appuie dessus. Un petit déplacement donne au bouton une sensation physique :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

Survoler un parent pour styliser un enfant

L'état de survol appartient à l'élément sous le pointeur et à tous ses ancêtres. Ainsi, .card:hover .title stylise le titre dès qu'une partie quelconque de la carte est survolée, et la même idée permet de révéler des éléments cachés :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

La ligne :focus-within compte : sans elle, un utilisateur du clavier qui arrive sur le bouton Delete avec Tab appuierait sur un bouton invisible. Associez chaque révélation au survol à une règle de focus.

Le survol sur écran tactile

Les téléphones et les tablettes n'ont pas de pointeur qui reste au-dessus d'un élément. La plupart des navigateurs mobiles appliquent :hover au premier toucher et le gardent jusqu'à ce que vous touchiez ailleurs, si bien qu'un style de survol peut sembler bloqué. Deux règles gardent cela sous contrôle :

Ne faites jamais du survol le seul moyen d'accéder à un contenu. Un menu qui s'ouvre au survol doit aussi s'ouvrir au clic.
Entourez les effets de survol purement décoratifs d'une media query qui vérifie la présence d'un vrai dispositif de survol :

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

Erreurs courantes

Un espace avant les deux-points. .btn :hover signifie « un élément survolé à l'intérieur de .btn ». Écrivez .btn:hover.
transition uniquement sur la règle :hover. L'animation se fait à l'aller, mais le retour est brutal. Placez-la sur la règle normale.
Mauvais ordre des liens. Gardez :link, :visited, :hover, :active dans cet ordre.
Un survol sans style de focus. Les utilisateurs du clavier ne déclenchent jamais :hover ; donnez aussi un style :focus-visible aux éléments interactifs.
Survoler un élément recouvert par un autre. Une surcouche invisible (souvent un pseudo-élément en position absolue) peut capter le pointeur. pointer-events: none sur la surcouche règle le problème.

Questions fréquentes

Comment ajouter un effet de survol en CSS ?

Écrivez une règle avec :hover après le sélecteur : .btn:hover { background: #1d4ed8; }. Les déclarations s'appliquent tant que le pointeur est sur l'élément. Ajoutez transition: background 0.2s; à la règle normale pour animer le changement.

Quelle est la différence entre :hover et :active ?

:hover s'applique pendant que le pointeur est sur l'élément. :active s'applique pendant qu'on appuie dessus, du bouton de souris enfoncé jusqu'au relâchement. Un bouton pressé est en général à la fois survolé et actif.

Dans quel ordre écrire les pseudo-classes des liens ?

:link, :visited, :hover, :active (retenez LVHA, ou « LoVe HAte » en anglais). Elles ont la même spécificité, donc la dernière règle gagne ; dans un autre ordre, un style visité ou survolé peut masquer le style de survol ou actif.

Comment changer la couleur d'un lien en CSS ?

Stylisez l'élément a : a { color: #2563eb; }, puis a:visited { color: #7c3aed; } et a:hover { color: #1d4ed8; } pour les autres états. Définir color sur a couvre à la fois les liens non visités et visités.

Le hover fonctionne-t-il sur mobile ?

Les écrans tactiles n'ont pas de pointeur qui reste au-dessus d'un élément. La plupart des navigateurs mobiles appliquent :hover au toucher et le gardent jusqu'à ce que vous touchiez ailleurs, ce qui peut laisser un style de survol bloqué. Entourez les effets réservés au survol de @media (hover: hover) et ne cachez jamais un contenu essentiel derrière le survol.

Concepts liés