• Votre panier est vide.

  • COMPTE

Les évènements CSS

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.

TOUT VOIR Ajouter une remarque
VOUS
Ajouter votre commentaire
Culte du code | 2015-2020  (Vecteurs par Freepik, Parallax par fullvector)