Travaux pratiques
TROISIÈME PARTIE
152
réagit pas au survol du lien, bien que les fonctionnalités employées soient autorisées
et leur syntaxe conforme. Pour qu’il daigne réagir, il faut recourir à une astuce
bizarre : spécifier une couleur de fond au survol des liens :
Voilà qui corrige ce bogue et obtient d’Internet Explorer le comportement souhaité :
IE ne reconnaissant que l’état de survol pour un élément , a:hover span ne peut
pas fonctionner si, préalablement, il n’est pas fait explicitement mention de la déclaration de l’état de survol a:hover.
Le décor est planté : on peut donc configurer cette boîte en lui attribuant couleurs, position sur la page et dimensions. Voici un exemple exploitant ces multiples possibilités :
Ce code représente le texte explicatif sous forme d’une boîte rectangulaire verte large
de 200px et haute de 100px, placée en position absolue à 200px du haut et 100px à
gauche du premier ancêtre positionné. La figure 11-2 illustre le résultat ainsi obtenu.
a:hover {
background: none;
}
a:hover span {
display: inline;
position: absolute;
top: 200px;
left: 100px;
width: 200px;
height: 100px;
background: green;
text-align: center;
color: white;
}
Figure 11–2
Comportement
dynamique en CSS (II)