Mouseover/mouseenter not fired by browser on animated/moving element

Question

If you have an element that has an animation to move it around, the mouseover and mouseenter events aren't fired unless the mouse is moved by the user. To demonstrate try the block of code below with jQuery.

If you put your mouse in front of the moving div so you're not moving the mouse when the div passes by then the mouseover isn't fired and the block doesn't stop.

In Firefox the mouseover event is fired without moving the mouse manually over the div, but only if you've moved the mouse at least once.

My question is there a workaround so an element moved under the mouse cursor will still have its mouseover event fired?

<script>
$(function() {
    var move = 10,
        left = 0,
        width = 100;

    var stop = setInterval(function() {
        left += move;
        $('#mydiv').css('left', left);
        if (left < 0 || (left + width > parseInt($(window).width()))) 
            move = -1 * move;
    }, 10);

    $('#mydiv').mouseover(function() { clearInterval(stop); });
});
</script>
<div id="mydiv" style="width: 100px; height: 100px; position: absolute; top: 0; left: 0; background-color: Black;">&#160</div>

I know the example is contrived, but it is just to demonstrate the issue. Thanks for any help!

Answer 1

This is a browser bug.

The only workaround would be to track the global mouse coordinates in a document-level mousemove handler, then check during the animation whether the element covers those coordinates.