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