Question

如果您有一个具有动画的元素可以移动它，则除非用户移动鼠标，否则不会触发鼠标悬停和鼠标中心事件。为了演示使用jQuery尝试下面的代码块。

如果你将鼠标放在移动div的前面，那么当div经过时你不会移动鼠标，那么鼠标悬停不会被触发，并且该块不会停止。

在Firefox中，无需在div上手动移动鼠标即可触发mouseover事件，但前提是您已将鼠标移动至少一次。

我的问题是有解决方法，因此在鼠标光标下移动的元素仍然会触发鼠标悬停事件吗？

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

我知道这个例子是人为的，但它只是为了证明这个问题。谢谢你的帮助！

Answer 1

这是一个浏览器错误。

唯一的解决方法是在document - 级mousemove处理程序中跟踪全局鼠标坐标，然后在动画期间检查元素是否覆盖这些坐标。

鼠标悬停/鼠标中心未被动画/移动元素上的浏览器触发

1 个答案: