mouseenter/mouseleave event doesn't fire when the target is animated and passes under the mouse pointer

Question

I have this example here to illustrate the situation: http://jsfiddle.net/nubrF/40/

If you hold your mouse onto the path of the animated element you can observe that the events are fired only in Firefox (not in IE, Chrome or Safari) when the target element passes "under" your mouse pointer.

I actually have two questions:

1. Is this the normal browser behavior?

2. What method do you recommend to simulate these events somehow and get notice when the target element passes under the mouse pointer?

I should mention that I already thought about pageX and pageY of the mouse and position of the element in the page but this solution seems complicated and not very clean.

Thanks for your help.

Answer 1

Yes, this is normal behaviour. A way round it might be to abandon mouseleave/mouseenter and bind a mousemove event to the document. From there, get the mouse pointer location on the page and the offset(), with() and height() of the animated element. If the last point saved from the mousemove event falls inside that area, your mouse is in the element.

You'd need to test it every time the animation updates, which you can do using the animate step function.

e.g.

function myAnimateStepFunc(e,fx) {
    var $e = $(fx.elem);
    var p = $e.offset();
    var isin = false;
    if(lastx >= p.left && lasty >= p.top) {        
        isin =(lastx < p.left + $e.width() && lasty < p.top + $e.height());           
    }

...

That might be enough, though you could extend that to then trigger mouseleave/mouseenter events yourself directed at the animating element.

Note you'll need to bind mousemove to the entire page since you'll need to update the lastx and lasty positions of the mouse wherever it moves on the page, not just within a containing div of the animation.