Ajoutez un effet de survol

À présent, vous ajouterez un effet de survol pour que la couleur d'arrière-plan des blocs de la barre de navigation change toutes les fois que le pointeur de la souris passe par-dessus l'un des liens. Pour ajouter un effet de survol, créez une nouvelle règle qui contient la pseudo-classe :survol

A SAVOIR...

 

Présentation de la pseudo-classe :survol  Une pseudo-classe est un moyen d'avoir un effet sur certains éléments dans un document HTML, basé non pas sur le code HTML du document lui-même, mais sur des conditions extérieures appliquées par le navigateur Web. Les pseudo-classes peuvent être dynamiques dans le sens où un élément de la page peut acquérir ou perdre la pseudo-classe tandis qu'un utilisateur "dialogue" avec le document.

La pseudo-classe :survol crée un changement dans l'élément de page mis en forme quand l'utilisateur passe la souris par-dessus l'élément. Par exemple, quand la pseudo-classe :survol est ajoutée au style de classe .navigation (.navigation:survol) pour créer une nouvelle règle, tous les éléments de texte que la règle .navigation met en forme changent conformément aux propriétés de la règle .navigation:survol.
  1. Ouvrez le fichier cafe_townsend.css.
  2. Sélectionnez la règle .navigation entière.



  3. Copiez le texte (Editer > copier).
  4. Cliquez une fois à la fin de la règle et appuyez sur Entrée (Windows) ou sur Retour (Macintosh) plusieurs fois pour créer des espaces.



  5. Coller (Editer > coller) le texte copié dans l'espace que vous venez de créer.
  6. Ajouter la pseudo-classe :survol au sélecteur .navigation collé, comme suit :



  7. Dans la nouvelle règle .navigation:survol, remplacez la couleur d'arrière-plan active (#993300) par #D03D03.



  8. Enregistrez le fichier et fermez-le.
  9. Ouvrez le fichier index.html dans la fenêtre de document et obtenez un aperçu de la page dans un navigateur (Fichier > Aperçu dans navigateur).

    Quand vous placez la souris par-dessus un lien quelconque, vous pouvez voir le nouvel effet de survol.