Jquery hover function pass variable to callback function

Question

I am trying to remove the title attribute for a hover link and then add it back to the mouse. I would like to pass var hoverText to hang ...

Here is the code I have. Any ideas?

$(".icon a").hover(function() { $this = $(this); var hoverText = $.data(this, 'title', $this.attr('title')); $(this).find("em").animate({opacity: "show", top: "-35"}, "slow"); $(this).find("em").text(hoverText); $this.removeAttr('title'); }, function(hoverText) { $(this).find("em").animate({opacity: "hide", top: "-45"}, "fast"); $(this).attr("title", hoverText); }); 

Answer 1

Put "hoverText" in the global variable.

 var hoverText = ''; $(".icon a").hover(function() { $this = $(this); hoverText = $.data(this, 'title', $this.attr('title')); $(this).find("em").animate({opacity: "show", top: "-35"}, "slow"); $(this).find("em").text(hoverText); $this.removeAttr('title'); }, function() { $(this).find("em").animate({opacity: "hide", top: "-45"}, "fast"); $(this).attr("title", hoverText); }); 

Answer 2

 $(".icon a").hover(function() { $this = $(this); $.data(this, 'title', $this.attr('title')); $(this).find("em").animate({opacity: "show", top: "-35"}, "slow"); $(this).find("em").text(hoverText); $this.removeAttr('title'); }, function(hoverText) { $(this).find("em").animate({opacity: "hide", top: "-45"}, "fast"); $(this).attr("title", $.data(this, 'title'); }); 

Trick:

 $.data(this, 'title'); 

When you use data, you effectively store the variable in this dom element for the purposes you just described. You can also solve the problem by declaring this variable $ over your initial hover function, expanding the scope for both.