Jquery Mouseenter/mouseleave Html()-swap Issue

I have the following Javascript/jQuery function: function addEventHandler(){ $('div').mouseenter(function() { $(this).html('Over'); }).mouseleave(function() {

Solution 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.

Solution 2:

I couldn't reproduce the problem:

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

Is it happening to you there too ?

Solution 3:

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).