Pseudo-classe :hover CSS

Définition et utilisation

CSS :hover Les pseudo-classes sont utilisées pour sélectionner des éléments au survol de la souris.

Astuce ::hover Les pseudo-classes peuvent être utilisées pour tous les éléments, et non seulement pour les liens.

Astuce :Utilisez :link Configurez le style des liens des pages non visitées en utilisant :visited Configurez le style des liens des pages visitées en utilisant :active Configurez le style des liens actifs.

Attention :Dans la définition CSS,:hover doit être placé :link et :visited(!si existant) avant de prendre effet !

Exemple

Exemple 1

Choisissez et configurez le style des liens au survol de la souris :

a:hover {
  background-color: yellow;
  font-size: 18px;
}

Essayez-le vous-même

Exemple 2

Choisissez et configurez le style des éléments <p>、<h1> et <a> au survol de la souris :

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

Essayez-le vous-même

Exemple 3

Choisir et définir les styles des liens non visités, visités, au survol et actifs :

/* Lien non visité */
a:link {
  color: green;
}
/* Lien visité */
a:visited {
  color: green;
}
/* Lien au survol */
a:hover {
  color: red;
}
/* Lien actif */
a:active {
  color: yellow;
}

Essayez-le vous-même

Exemple 4

Définir des styles différents pour les liens :

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Essayez-le vous-même

Exemple 5

Placez le curseur sur l'élément <span> pour afficher l'élément <div> (comme une tooltip) :

div {
  display: none;
}
span:hover + div {
  display: block;
}

Essayez-le vous-même

Exemple 6

Afficher et cacher le menu déroulant au survol de la souris :

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

Essayez-le vous-même

Grammaire CSS

:hover {
  déclarations css;
}

Détails techniques

Compatibilité des navigateurs

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette pseudo-classe.

Pages associées

Tutoriel :Liens CSS

Tutoriel :pseudo-classes CSS