:hover
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La pseudo-classe CSS :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur·ice le survole avec le pointeur, sans nécessairement l'activer.
Exemple interactif
.joinBtn {
width: 10em;
height: 5ex;
background-color: gold;
border: 2px solid firebrick;
border-radius: 10px;
font-weight: bold;
color: black;
cursor: pointer;
}
.joinBtn:hover {
background-color: bisque;
}
<p>Souhaitez-vous vous joindre à notre quête ?</p>
<button class="joinBtn">Confirmer</button>
Les styles définis par la pseudo-classe :hover seront remplacés par toute pseudo-classe liée à un lien (:link, :visited, ou :active) qui a au moins la même spécificité. Pour mettre en forme correctement les liens, placez 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.
Note :
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éveloppeur·euse·s web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateur·ice·s de tels appareils.
Syntaxe
:hover {
/* ... */
}
Exemples
HTML
<a href="#">Ce lien sera écrit sur un fond doré lors du survol.</a>
CSS
a {
background-color: powderblue;
transition: background-color 0.5s;
}
a:hover {
background-color: gold;
}
Résultat
Spécifications
| Specification |
|---|
| HTML # selector-hover |
| Selectors Level 4 # hover-pseudo |
Compatibilité des navigateurs
Chargement…