Le terme "hover" signifie "survoler" en anglais. Cela définit ce qu'il va se passer quand l'utilisateur passe la souris sur un élément comme un lien ou un bouton. Cela permet d'ajouter des animations à son site afin de le rendre plus attractif, esthétique.
Utilisation du :hover
Dans un premier temps, nous allons utiliser le hover afin de changer la couleur d'un lien quand la souris le survol. HTML :
CSS :
Dans ce cas, le lien va devenir bleu au lieu de rouge.
Et au survol :
Pratique !
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Pour un rendu plus esthétique, il existe les transitions. Cela permet justement d'effectuer une transition entre les deux états (ici rouge et bleu) pour un rendu plus esthétique. Exemple : CSS :
Ici la transition se fera en une demie-seconde. Naturellement, ceci ne sont que des exemples d'utilisation afin de comprendre le fonctionnement. Il peut être utiliser avec toute sorte d'éléments. Pour aller plus loin, voici quelques liens menants à des exemples d'animations utilisants la propriété hover : Exemple de lien Exemple avec un bouton
Partager sur