4

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.

alt text

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!

robkriegerflow
  • 716
  • 5
  • 13
o01
  • 5,191
  • 10
  • 44
  • 85

3 Answers3

2

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.

RoToRa
  • 37,635
  • 12
  • 69
  • 105
  • Err .. not perfectly tho - there's still some divs that doesn't get the exit event triggered. – o01 Nov 26 '10 at 12:49
  • ^ Don't get me wrong - your suggestion made a huge improvement, but as I said - if I move the pointer really fast across the divs, there still are some who retain their numbers. – o01 Nov 26 '10 at 12:51
  • I don't get any retained numbers. As an alternative have you considered a CSS only solution: http://jsfiddle.net/dstsZ/ – RoToRa Nov 26 '10 at 14:39
  • The CSS alternative is definitely a good solution, but not optimal for this project for different reasons. Also, there are about 100 different overlapping divs that this effect should apply to - I'm guessing that's why you don't get the bug in jsfiddle, but I do in my project. However, the bug is now so minimal that I can live with it. Thanks again dude:) – o01 Nov 26 '10 at 15:12
0

I couldn't reproduce the problem:

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

Is it happening to you there too ?

jAndy
  • 231,737
  • 57
  • 305
  • 359
  • Your version works excellent - and I do not experience the same problem there. My code, however, is slightly more advanced than the simplified example above. I'll update the question shortly... – o01 Nov 26 '10 at 09:09
0

Would any of those divs be nested inside the other divs in the HTML by any chance?

I'm thinking maybe it could be something to do with the mouse pointer entering the top level div then not "leaving" when going into the other ones since they are children of the top one (even though they've been positioned absolutely).

thomasrutter
  • 114,488
  • 30
  • 148
  • 167