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 perfectly. The divs sometimes overlap slightly (don’t ask), and as the picture below tries to convey they don’t always get the “Out” value. This happens especially if I move the pointer over them very fast.

Any ideas how to make sure every div gets the “Out” value on mouseleave? Thanks!

UPDATE: Real code excerpt

As my real function isn’t quite as simple as the example above, I’ve included the exact code of the real function here:

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 like 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 country name in the inner most <span> is swapped with a number representing employees on mouseenter (retrieved from getNumber();) – then swapped back on mouseleave.

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

Live example: http://jsfiddle.net/N9YAu/4/

Hope this helps. Thanks again!

Answer 1

Your problem is that for one you only have one variable to store the “original content” for all items, and also the mouseenter handler can be called a second time before the mouseleave handler, causing the value “original content” variable to be overwritten by the hover content.

You should store the original contents once at the start of the script and store them separatly for each item. I’ve done this in followign example using jQuery’s data function: http://jsfiddle.net/N9YAu/5/

NB, I’ve replace your separate mouseenter/mouseleave bindings with one hover binding. It’s probably the same in the end, but it’s the “proper way” to do it.