Vidéo: Bases de jQuery | Partie 2 - Selectors (Sélecteurs) 2025
La plupart des changements CSS3 sont statiques - vous demandez au navigateur de rechercher des balises, des attributs ou des modèles spécifiques. Toutefois, les sélecteurs d'événements sélectionnent des objets en fonction d'un événement particulier, par exemple une souris.
Lorsque l'utilisateur passe le pointeur de la souris sur un objet, la mise en forme de l'objet change pour indiquer que l'événement s'est produit. Lorsque l'utilisateur déplace le pointeur de la souris hors de l'objet, la mise en forme revient à la normale. La liste suivante vous indique les sélecteurs d'événements généralement utilisés par les documents.
-
: hover: Sélectionne un objet lorsque le pointeur de la souris passe dessus. Les développeurs utilisent généralement cette fonctionnalité pour montrer qu'un élément est sélectionné ou pour afficher des détails sur un objet. Vous voyez cette fonctionnalité utilisée assez souvent avec les systèmes de menus pour afficher les éléments du sous-menu.
-
: focus: Sélectionne un objet lorsque l'objet a le focus d'entrée (clavier). Il est couramment utilisé avec des formulaires pour montrer quel champ est sélectionné pour l'entrée. Une utilisation intéressante de ce sélecteur est d'afficher le champ sélectionné dans une police de plus grande taille pour faciliter la saisie.
Les sélecteurs d'événements sont pratiques car vous pouvez les utiliser pour faire en sorte que la page interagisse avec l'utilisateur sans même écrire une ligne de code. Tout se passe dans le cadre d'un style. La procédure suivante montre une façon d'utiliser des sélecteurs d'événements pour produire un effet visuel.
-
Créez le fichier ExternalCSS. HTML et ExternalCSS. Fichiers CSS et copiez-les dans un nouveau dossier.
-
Ouvrir ExternalCSS. CSS.
-
Tapez le code suivant après les styles existants et enregistrez les modifications sur le disque.
p: hover, h1: hover {text-decoration: aucun; famille de polices: "Arial", sans-serif; taille de police: xx-large; couleur: BlueViolet; background-color: Plum;} -
Rechargez la page de test.
-
Passez le pointeur de la souris sur le texte du paragraphe.
Vous voyez l'effet de la modification du style. Le style du texte change pour correspondre aux critères de sélection.
-
Passez la souris sur le texte de l'en-tête.
Le texte du paragraphe revient à la normale et le texte de l'en-tête correspond maintenant aux critères de sélection. Vous pouvez utiliser cette approche avec n'importe quel objet à l'écran et effectuer tout type de changement souhaité.
