Dépannage informatique à domicile

Accueil Prestations News Nos Sites Astuces Contact

Ce code affiche une légende sous une image survolée.

Exemple avec hover:

• légende de l'image 1
• légende de l'image 2

Codage CSS de l'exemple:

ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

li {
float: left;
width: 150px;
text-align: center;
margin: 1em;
padding: 0.5em;
border: 1px solid black;
}

/* définition du lien qui affichera le calque */
li a {
text-decoration: none;
}

/* correction d'un bogue d'IE */
li a:hover {
background: none;
}

/* définition de la balise span incluse dans le lien a */
li a span {
display: none;
}

/* définition de la balise span lors du survol */
li a:hover span {
display: block;
}

li a img {
border : 0;
}