Mouseover / mouseenter does not launch on browser on animated / moving element

Question

If you have an element that has animation to move it, the mouseover and mouseenter events will not fire unless the mouse is moved by the user. To demonstrate an example code block using jQuery.

If you place the mouse in front of a moving div so that you do not move the mouse when the div passes, then the cursor does not start and the block does not stop.

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

There is a workaround in my question, so that the element moved under the mouse cursor still fires the mouseover event?

<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 that the example is contrived, but this is just to demonstrate the problem. Thanks for any help!

Answer 1

.

document -level mousemove, , .