JQuery mouseenter / mouseleave html () - change problem

Question

I have the following Javascript / jQuery function:

function addEventHandler(){ $("div").mouseenter(function() { $(this).html("Over"); }).mouseleave(function() { $(this).html("Out"); }); } 

It works, but not perfect. Sections sometimes overlap slightly (do not ask), and, as shown in the figure below, they do not always get the value "Out". This happens, especially if I move the pointer over them very quickly.

Any ideas how to make sure each div gets a "Out" value on mouseleave? Thanks!

UPDATE: Source Code

Since my real function is not as simple as the example above, here I entered the exact code of the real function:

 function addEventHandlers(){ var originalContent = ""; $(".countryspots div").mouseenter(function() { var thisClass = $(this).attr("class"); var thisCountry = thisClass.split(" "); var thisNumber = getNumber(thisCountry[1]); originalContent = $(this).children("a").html(); $(this).children("a").html("<span>" + thisNumber + "</span>"); }).mouseleave(function() { $(this).children("a").html(originalContent); }); } 

And my HTML markup is this:

 <div class="countryspots"> <div class="america brazil"><a href="#"><span>Brazil</span></a></div> <div class="america argentina"><a href="#"><span>Argentina</span></a></div> <div class="europe ireland"><a href="#"><span>Ireland</span></a></div> <div class="europe portugal"><a href="#"><span>Portugal</span></a></div> </div> 

The general idea is that the name of the country in the inner majority of the <span> swaps the number representing the employees on the mouseenter (extracted from getNumber(); ), then is replaced by mouseleave .

the real problem is that many divs keep their employee number when I move the pointer to another div. In other words: the mouseleave event mouseleave not executed on all mouseleave .

Real-time example: http://jsfiddle.net/N9YAu/4/

Hope this helps. Thanks again!

Answer 1

Your problem is that for one you have only one variable to store the "source content" for all elements, and you can also call the mouseenter handler a second time before the mouseleave handler, calling the value "original" content, which should be overwritten by the content guidance.

You must save the original content once at the beginning of the script and store them separately for each element. I did this in the following example using the jQuery data function: http://jsfiddle.net/N9YAu/5/

NB, I replace your individual mouseenter / mouseleave single hover binding. This is probably the same at the end, but it is the “right way” to do it.

Answer 2

I could not reproduce the problem:

http://www.jsfiddle.net/N9YAu/1/

Does this happen to you there too?

Answer 3

Can any of these divs be inside inside other divs in HTML by chance?

I think, maybe this could be due to the mouse pointer entering the upper level of the div, and not “leaving” when going to others, as they are children of the upper level (although they were absolutely located).