CSS :hover Pseudo-classe
La pseudo-classe :hover sélectionne et met en forme l'élément survolé. Elle est déclenchée lorsque l'utilisateur déplace le pointeur de la souris dessus. Le survol ne nécessite pas d'actionner le dispositif de pointage.
La pseudo-classe :active peut coexister avec :hover. Lorsque les deux s'appliquent, :active prime en raison de l'ordre de cascade plutôt que de remplacer strictement :hover.
INFO
De nombreux appareils tactiles ne prennent pas en charge :hover car ils ne disposent pas d'un état de survol persistant ; le tapotement d'un élément déclenche généralement :active ou :focus à la place.
Pour une meilleure accessibilité, il est recommandé d'appliquer les mêmes styles à :focus en plus de :hover. Pour vous assurer que les styles ne s'appliquent que sur les appareils prenant en charge le survol, enveloppez vos règles dans @media (hover: hover) { ... }.
Version
Syntaxe
Syntaxe CSS :hover
:hover {
css declarations;
}Exemple de la pseudo-classe :hover :
Exemple de la pseudo-classe CSS :hover
<!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>Survolez les liens pour voir comment la couleur change.
Exemple de la pseudo-classe :hover avec la balise <a> :
Exemple de code CSS :hover pour un lien
<!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>Exemple de la pseudo-classe :hover avec la balise <div> :
Exemple de code CSS :hover pour un div
<!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>Pratique
Quel est l'objectif du sélecteur :hover en CSS ?