Faire son site 11 : Référence CSS - :hover

:hover

La pseudo-classe :hover permet de cibler un élément lorsque celui-ci est survolé par le pointeur de la souris sans nécessairement être activé.

Cette pseudo-classe est fréquemment utilisée pour agrémenter les liens (balise <a>) comme on peut le remarquer sur ce site. Dans le cas d'un lien, la pseudo classe :hover peut être surchargée par d'autres pseudo classes relatives aux liens comme :link, :visited et :active.

Pour décorer les liens à l'aide de plusieurs pseudo-classes, il faut les placer dans l'ordre- :link - :visited - :hover - :active afin d'éviter des effets de débordements de bords.


<style>
#exemple {
  font-weight: bold;
  background-color: blue;
  color: yellow;
}
#exemple:hover {
  background-color: yellow;
  color: blue;
}
</style>
<span id="exemple">
  Ceci est un exemple pour la pseudo-classe :hover
</span>

Ceci est un exemple pour la pseudo-classe :hover