JQuery - Modifier le texte d'un lien au survol

Bonjour à tous,

Je suis un newbie en javascript/jquery et je cherche à modifier le texte d'un lien lorsque la souris survole celui-ci. Par exemple: "lien" devient "*lien*"

J'arrive à modifier le texte du lien au survol mais lorsque la souris s'en va, le texte du lien ne revient pas à celui d'origine et lorsque je repasse la souris dessus, le lien est encore modifié. Par exemple: "**lien**"

Voici mon code actuel:

	$('a').mouseover(function(){		
		var text = $(this).html();
		text = '*'+text+'*';
		$(this).html(text);
	});

Voilà, si quelqu'un peut me mettre sur la piste, ce serait bien sympa!
Modifié par cedricn (23 Jun 2009 - 11:18)

S'il s'agit juste de générer une astérisque avant et après ton lien au survol, tu peux recourir aux pseudo-éléments CSS adéquats:

a:hover:before, a:hover:after {content:"*"}

Salut Benjamin,

Merci de ta réponse.

Oui effectivement pas de problème en utilisant du code CSS mais je veux justement être capable de reproduire ça avec jQuery. C'est disons, une sorte d'exercice d'apprentissage!

Pour ton apprentissage, que souhaites-tu faire exactement? La démarche est différente si tu souhaites rajouter des astérisques au survol plutôt que de modifier le texte en soi.

Salut,

Tu devrais plutôt utiliser hover que mouseover.

Pour la doc, c'est ici :

http://docs.jquery.com/Events/hover#overout

Disons que dans l'idée, voici ce que je souhaite obtenir:

Lorsque la souris survol un lien, le texte de celui-ci soit remplacé par un autre et lorsque la souris quitte le lien, le texte initial de ce lien réapparaisse.

Skoua a écrit :
Salut,

Tu devrais plutôt utiliser hover que mouseover.

Pour la doc, c'est ici :

http://docs.jquery.com/Events/hover#overout

Ah ben je crois que c'est à peu près ce que je cherche. Je vais tester ça et je vous tiens au courant. Merci beaucoup!

cedricn a écrit :
Disons que dans l'idée, voici ce que je souhaite obtenir:

Lorsque la souris survol un lien, le texte de celui-ci soit remplacé par un autre et lorsque la souris quitte le lien, le texte initial de ce lien réapparaisse.

Ok, c'est donc un peu plus complexe que l'exemple affiché sur la documentation en ligne.
Tu peux te baser sur cette solution:

$(function(){
  var originalText, hoveredLink;
  $("a").hover(
    function(){
      hoveredLink = $(this);
      originalText = hoveredLink.text();
      hoveredLink.text("Mon nouveau texte");
    },
    function(){
      hoveredLink.text(originalText);
    }
  );
});