Un menu horizontal réactif

Rendre les boutons dynamiques

Hovercraft
http://en.wikipedia.org/wiki/Hovercraft
GNU Free Documentation License

L'aspect actuel des "boutons" est maintenant correct. Mais ils ne réagissent pas encore au passage de la souris.

Pour obtenir l'effet désiré, nous allons faire appel à une nouvelle pseudo-classe.

La pseudo-classe hover

La pseudo-classe visited permet de traiter un événement qui a eu lieu dans le navigateur. Tout se passe comme si l'on ajoutait une classe à l'élément visé.

La pseudo-classe hover permet de traiter un événement qui peut se dérouler dans le navigateur: le passage de la souris au-dessus d'un élément du texte.

Lorsque la souris survole un élément de menu, tout se passe comme si une nouvelle classe était ajoutée à cet élément. Il présente donc une nouvelle forme dictée par la nouvelle classe.

Et, bien sûr, il n'y a pas vraiment de nouvelle classe .hover ajoutée. C'est de nouveau une classe "fantôme".

Très exactement comme dans le cas de la pseudo-classe .visited.

  •  Si nécessaire, ouvre le document menu.html

#menu a Nous allons établir un style pour les éléments de type "lien" (les balises <a>) qui figurent dans le menu lorsqu'ils sont survolés par la souris.

  • Ouvre l'éditeur de styles CasCadeS.
  • établis une nouvelle règle de style pour le sélecteur #menu a:hover
  • Définis le style de la manière suivante:
    • couleur des caractères: bleu
    • couleur du fond rouge

Mon menu

  • Ferme l'éditeur de styles
  • Enregistre le document.
  • Passe la souris sur le menu: les boutons doivent être dynamiques.

Quand tu as obtenu l'effet de boutons dynamiques, passe à la page suivante. Vers la page suivante Page suivante


Dernière modification 01/09/2016 Test dans /info ...