Travaux pratiques
TROISIÈME PARTIE
166
Préciser un autre comportement pour la pseudo-classe de survol :hover apporte un
effet de finition agréable :
La figure 12-6 illustre l’effet de ces dernières instructions : l’inversion des couleurs
du lien survolé par le pointeur de la souris. Le texte y passe en effet du vert à l’orange
tandis que la couleur de fond subit la transformation inverse. Le chapitre suivant
détaille la conception de menus graphiques avec images et réactions au survol par le
pointeur de la souris (appelés rollover menus dans le métier).
Produire un effet de relief sur les boutons
Poursuivons dans cette voie en créant des boutons avec un effet de relief qui semblent
s’enfoncer quand le pointeur de la souris les survole. Jouer sur les teintes des différents côtés des boutons assure l’effet de relief ; les inverser donnera l’impression de
profondeur d’un bouton poussé. Pour tout cela, il suffit d’ajouter quelques déclarations de bordures sur l’élément dans les styles déjà créés :
Figure 12–5
Menu sous forme
de boutons (II)
#menu a:hover, #menu a:focus {
color: orange;
background: green;
}
Figure 12–6
Menu sous forme
de boutons (III)
border-width: 1px 2px 2px 1px;
border-color: #cecece #4a4a4a #4a4a4a #cecece;
border-style: solid;