Rappels
Nous avons vu dans le cours précédent une introduction aux évènements. Ici, nous verrons des exemples d’évènements les plus courants. Les évènements sont aussi appelés de façon plus formelle des « pseudo-classes ».
Pour rappel, les évènements sont précédés d’un « : » et peuvent être associés à un ou plusieurs éléments de notre page :
#testclic:active {
color: red;
}
Évènements les plus courants
| :active | Quand on active l’élément (clic de souris ou touche Entrée si focus) |
| :hover | S’active au survol de la souris |
| :visited | Applique des propriétés sur des liens visités |
| :focus | Applique des propriétés sur un élément lorsqu’il reçoit le focus |
| :root | Indique la racine du document (<html> dans notre cas) |
| :checked | Représente les boutons radio, case à cocher et options activées |
Il existe d’autres pseudo-classes plus spécifiques. Une liste des standards est disponible à cette adresse : Toutes les pseudo-classes
Mise en pratique
Réalisez une page avec neuf boutons alignés horizontalement.
Le bouton ayant le focus doit se colorier en rouge. Un bouton doit doubler de taille lorsque l’on passe la souris dessus. Enfin, les bordures doivent s’épaissir.
-
Add a note