:hover
Correspond à l’élément survolé par le curseur de la souris. La base des effets de survol sur les boutons, les liens et les cartes.
Exemple
#.btn {
background: #7c3aed;
transition: background-color 0.2s, transform 0.2s;
}
.btn:hover {
background: #6d28d9;
transform: translateY(-2px);
}<button class="btn" type="button" style="padding: 10px 18px; border: 0; border-radius: 10px; color: #fff; font: 600 15px system-ui, sans-serif; cursor: pointer;">Survolez-moi</button>Définition et utilisation
#La pseudo-classe :hover s’active quand l’utilisateur pointe un élément avec le curseur, et se désactive quand le curseur s’éloigne. Elle correspond non seulement à l’élément pointé lui-même, mais aussi à tous ses ancêtres, car le curseur se trouve au-dessus de tous à la fois. Ainsi, .card:hover .icon change l’icône dès que le curseur se trouve n’importe où au-dessus de la carte.
On l’associe le plus souvent à transition, pour que le changement de couleur, d’ombre ou de position soit fluide. Pour les liens, pensez à l’ordre des règles : :link, :visited, :hover, :active. À spécificité égale, c’est la règle écrite en dernier qui gagne, donc placer :visited après :hover masquerait l’effet de survol.
Sur les écrans tactiles, il n’y a pas de curseur. Les navigateurs simulent généralement :hover après un tap, et l’état peut « rester collé » à l’élément jusqu’à ce que vous touchiez ailleurs. Ne cachez donc pas de contenu important derrière le seul survol, et enfermez les effets réservés à la souris dans @media (hover: hover).
Les personnes qui utilisent un clavier ne déclenchent pas non plus :hover. Il vaut la peine de répéter l’effet de survol d’un élément interactif dans :focus-visible.
Syntaxe
#sélecteur:hover { propriété: valeur; }Utilisations courantes
#- Survolez la carte avec le curseur : elle change de couleur et se soulève légèrement. La fluidité vient de
transitiondéfini dans le style de base. - Survoler la carte change un élément situé à l’intérieur. L’icône réagit dès que le curseur se trouve n’importe où au-dessus de la carte.
- Seulement l’icône elle-même. La carte ne change pas tant que le curseur ne touche pas l’étoile.
- À l’inverse : la carte est atténuée et ne s’éclaircit qu’une fois le curseur au-dessus.
- L’effet seulement sur les appareils avec un curseur, comme une souris ou un pavé tactile. Sur téléphone, la carte ne change pas.
Utilisations courantes en pratique
#.demo:hover
transition défini dans le style de base..demo:hover {
background: #7c3aed;
transform: translateY(-3px);
}.demo:hover .icon
.demo:hover .icon { background: #f59e0b; rotate: 15deg; }.icon:hover
.icon:hover { background: #10b981; scale: 1.25; }.demo:not(:hover)
.demo:not(:hover) { opacity: 0.5; }@media (hover: hover)
@media (hover: hover) {
.demo:hover { background: #0ea5e9; }
}Plus d’exemples
#.lesson .actions {
opacity: 0;
transition: opacity 0.2s;
}
.lesson:hover .actions,
.lesson:focus-within .actions {
opacity: 1;
}<style>
.lesson { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #18181b; }
.lesson button { padding: 6px 10px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff; font: inherit; }
</style>
<div class="lesson">
<span>Leçon 4 : pseudo-classes</span>
<span class="actions"><button type="button">Modifier</button> <button type="button">Supprimer</button></span>
</div>Survolez la ligne, ou cliquez dans l’aperçu et appuyez sur Tab. Les boutons apparaissent dans les deux cas, car la règle combine :hover et :focus-within.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Ne cachez pas d’informations ni de boutons importants uniquement derrière
:hover. Sur téléphone, et avec la navigation au clavier, l’utilisateur ne les verra jamais. - Répétez l’effet de survol pour le clavier :
.btn:hover, .btn:focus-visible { … }. - Au survol, changez
transform,opacityet les couleurs. Changerwidthoumargindéplace les éléments voisins et peut faire sauter la mise en page.
Entrées associées
#- :focus-visibleCorrespond à un élément ayant le focus seulement quand le navigateur juge que l’indicateur doit être visible, par exemple lors d’une navigation au clavier.
- :activeCorrespond à l’élément au moment de son activation, le plus souvent quand le bouton de la souris est enfoncé sur un bouton ou un lien.
- :focus-withinCorrespond à un élément qui a lui-même le focus ou qui contient un élément avec le focus. Permet de mettre en valeur tout un formulaire ou une carte.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.