En CSS, le sélecteur :hover est utilisé pour définir les styles pour un élément lorsque l'utilisateur place le curseur de la souris sur cet élément. Cela permet d'ajouter un effet interactif à un site web.
Voici un exemple d'utilisation du sélecteur :hover :
a:hover { color: red; }
Dans cet exemple, lorsque l'utilisateur place le curseur de la souris sur un lien <a>, la couleur du texte devient rouge et il est souligné.
Le sélecteur :focus permet de définir les styles pour un élément lorsqu'il a le focus, c'est-à-dire lorsqu'il est sélectionné pour une interaction (par exemple en cliquant dessus ou en utilisant les flèches du clavier). Cela peut être utile pour améliorer l'expérience utilisateur et indiquer clairement à l'utilisateur où se trouve le focus sur la page.
a:focus { color: green; }
Le "focus" est souvent utilisé pour les formulaires, que nous verrons sous peu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a {
color: blue;
font-size: 24px;
}
a:hover {
color: red;
}
a:focus {
color: green;
}
</style>
</head>
<body>
<a href="">Mon lien change de couleur</a>
</body>
</html>
<aside> 💡 Vous pouvez également vous exercer via le jeu https://flukeout.github.io/ (level 01 à 14)
</aside>