a span {display:none ; /* cache les <span> placés dans
un lien <a> */
text-decoration:none ; /* supprime le soulignement du texte <span>
*/
color:black} /* met le texte <span> en noir */
a:hover span {display: block; /* Montre le texte <span> lors
du survol */
position: absolute; /* envoi le texte <span> dans 1 zone précise
de l'écran */
top: 400px; /* cette zone se situe à 400 pixels du haut */
left: 200px ;} /* cette zone se situe à 200 pixels de la gauche*/
.boite {position: absolute; /* envoi 1 boite dans 1 zone précise
de l'écran */
top: 390px; /* boite placée autour de l'affichage prévu
du texte <span> */
left: 190px ; /* boite placée autour de l'affichage prévu
du texte <span> */
width: 200px ; /* largeur en pixel de la boite */
height:50px ; /* largeur en pixel de la boite */
border: solid 2px black} /* bordure de la boite */
</style>
</head>
<body>
<div class="boite"></div> <!-- appel
"boite" -->
<a href="#">lien 1<span> a a a a a a a a a</span></a>
<!-- lien et son commentaire en survol -->
<a href="#">lien 2<span> bbb bb bbb bbb bbb</span></a>
<!-- lien et son commentaire en survol -->
</body>
</html>
COMMENTAIRES
Ce script cache un texte dans une balise <span> grace à un display:none. Un survol a:hover remplace display:none par display:block, c'est à dire fait afficher le contenu du <span>.
Reste à décider de la zone ou apparaîtra ce commentaire.
On peut utiliser ce script pour afficher des commentaires sur les photos d'une galerie, par exemple, mais aussi pour un menu.
Nota : attention position:absolute positionne à partir de la position de la boite "parent", pas à partir du haut de la page. Ici, la boite parent, c'est <a>. Cela peut entraîner des problèmes de positionnement dans certains cas.