Texte déroulant au passage de la souris

|Bonjour a tous !

Je souhaiterai avoir un texte qui se déroule au passage de la souris, comme par exemple :
(sans la souris) "Mon texte..."
(avec la souris dessus) "Mon texte est le plus beau !"

Je peux déjà créer quelque chose dans ce genre, avec onmouseover et sans javascript.....
Seulement ! il y a un problème lorsque le texte est sur plusieurs lignes, lorsque la souris se trouve dessus, soit le texte qui suit se décale, soit je le bloque et du coup ça se superpose assez bizarrement : le titre ne "cache" pas le texte.....



Je voudrais donc : un texte qui se déroule avec une superposition avec le texte du dessous, mais en cachant ce dernier.....mais je suis un misérable microbe en javascript ( qui a ma connaissance peut faire ce que je veux) donc je sollicite votre aide...

Merci pour vous réponse assez attendu...
Modifié par Murasakikage (05 Oct 2010 - 09:47)

Hello,

Si tu veux que le texte quui se déroule "masque" celui qui est en dessous, pourquoi tu ne lui applique pas une couleur de fond ?

#monbloc {
    background-color: #fff;
}

Et, au passage, l'événement onmouseover est une fonction javascript

J'ai déjà tenter de mettre du background avec une class, j'ai aussi tenté de "surligner" le texte, et rien n'y fait, le premier texte ne "cache" pas le second.....

Est-ce que tu pourrais nous montrer le code en question qu'on puisse jeter un coup d'oeil ? Ca sera plus pratique ...

Bon finalement ce projet est modifié, donc le déroulement de texte est plus nécessaire, mais la solution m'intéresse quand même !

voici le code :

#titre_rappel {
	width: 120px;
	height: 20px; 
}


#titre_rappel a:link {text-decoration:none;
	color: #000;
	background-color: #FFF;
}

.lien_rappel {
	background-color: #FFF;
	display:block;
	font-size: 11px;
	font-weight: bold;
	margin-top: 8px;
}

<div id ="titre_rappel">
<a class="lien_rappel" href="mapage.html" title="Plus d\'info" onmouseover="this.firstChild.data=\''.addslashes($titre_complet).'\'" onmouseout="this.firstChild.data=\''.addslashes($petit_titre).'\'">'.$petit_titre.'
</a></div>
<div id="contenu_rappel">et hopeula voila du contenu, qui va se faire manger par le titre</div>