Travaux pratiques
TROISIÈME PARTIE
156
Légender le survol de photos
On reprend l’idée des exemples précédents : le contenu de la légende apparaît dans
une balise lors du survol du lien renfermant l’image. Le résultat du code suivant est présenté figure 11-5.
CSS
a.info {
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* contournement d’un bogue d’IE */
z-index: 500;
}
a.info:hover span {
display: inline;
position: absolute;
z-index: 500;
top: 2em;
left: 1em;
background: green;
text-align: center;
color: white;
padding: 0.2em;
}
HTML

• légende de
  l'image 1


• légende de
  l'image 2