Hover texte remplacé par image

05 mai 2012, 16:30

Bonjour,
Je voulais qu'en survolant un texte avec la souris, une image apparaisse et j'ai utilisé ceci

<style type="text/css">
a{display:block;width:1100px;line-height:30px;position:relative;text-decoration:none;}
a img{border:3px solid #b0b0b0;margin:5px 5px 5px 5px; padding:5px;}
a span{display:none;background:white;position:absolute;top:0; left:0; width:200px;text-align:center;}
a:hover span{display:block;}
</style>
...
<a href="">Remplacement de l'écumeur ATK Dispergator par un Deltec TC2060<span><img src="Historique/TC2060.jpg" /></span></a>

et ça fonctionne très bien à un petit détail près : le texte inclus dans les balises <a> apparaissent au-dessus de l'image;
je voudrais qu'il soit masqué par l'image, comme le texte qui n'est pas dans des <a>.
Voir exemple ici http://www.rudyv.be/Aquarium/Historique.php et passer la souris sur le texte à côté de la date 06/2011

Merci d'avance pour votre aide

05 mai 2012, 21:54

Salut,

enlève les position sur les a, ou bien affecte-leur un z-index inférieur à celui de l'image.

@+

06 mai 2012, 09:55

Merci pour la réponse.
Si j'enlève les position le problème du texte sur l'image est résolu mais tout ce qui se trouve en dessous de la ligne sélectionnée se décale vers le bas.
Voici la définition du style (j'ai ajouté un float:right)

Code : Tout sélectionner

<style type="text/css">
a{display:block;width:1100px;line-height:30px;position:relative;text-decoration:none;}
a img{border:3px solid #b0b0b0;margin:5px 5px 5px 5px; padding:5px;}
a span{display:none;background:white;position:absolute;float: right;top:0; left:0; width:200px;text-align:center;}
a:hover span{display:block;}
</style>

L'écran au départ ressemble à ceci

En passant sur la ligne 06/2011 j'obtiens ceci (l'image décale tout vers le bas)

alors que je voudrais obtenir ceci (image superposée à droite)

Merci d'avance pour votre aide

Hover texte remplacé par image

Qui est en ligne