132
Maîtrise des CSS
Survol distant
Le.survol distant.est.un.événement.de.survol.qui.déclenche.une.modification.d’affichage.
dans.un.autre.endroit.de.la.page..Il.s’opère.en.imbriquant.un.élément,.ou.plusieurs,.à.l’intérieur.d’un.lien.d’ancre..Les.éléments.imbriqués.peuvent.ensuite.être.positionnés.un.à.un.
de.manière.absolue..Même.s’ils.s’affichent.à.différents.endroits,.ils.sont.tous.contenus.dans.
la.même.ancre.parente.et.réagissent.donc.au.même.événement.de.survol..Le.survol.d’un.
élément.peut.ainsi.affecter.le.style.d’un.autre.élément.
çant.une.liste.de.liens.à.côté.de.l’image..Lorsque.l’utilisateur.survolera.ces.liens,.il.déclenchera.l’affichage.des.zones.réactives.de.l’image..Lorsqu’il.survolera.les.zones.réactives.de.
l’image,.il.déclenchera.l’affichage.des.liens.texte.
Le. code. HTML. de. cet. exemple. est. analogue. à. celui. de. l’exemple. de. carte-image. CSS.
simple..Vous.aurez.cependant.besoin.de.deux.balises.span.supplémentaires :.l’une.entourant.le.texte.du.lien.et.l’autre,.vide,.qui.doit.agir.comme.zone.réactive..Vous.pourrez.ainsi.
positionner.les.liens.texte.à.côté.de.l’image.et.les.zones.réactives.au-dessus.de.chacune.des.
personnes.