元素移动时悬停不正确

Question

我有一个动态 div，我想知道鼠标何时悬停在这个 div 上。我尝试了.is( ':hover' )，但没有用。

jsFiddle demo

在演示中，我制作了一个移动的 div，如果我不移动鼠标，则永远不会调用日志，但如果我手动将鼠标悬停在框上，它总是会写入日志。

从不将日志写入控制台。

总是在控制台写日志，连盒子都没了。

这是一个错误还是我犯了一个错误？如何正确检测悬停？

Answer 1

您应该使用mousemove() 事件跟踪鼠标移动，并检查鼠标在 div 移动时的最后已知位置。

例子：

HTML 和 CSS：

.red-box {
    display : inline-block;
    position : absolute;
    width : 50px;
    height : 50px;
    top : 10px;
    left : 0px;
    background-color : red;
}
#wrapper {
    height: 100vh;
    width: 100vw;
}

<div id="wrapper">
    <div class="red-box"></div>
</div>

JavaScript：

var posX = 0;
var step = 10;
var maxX = 200;
var mouseX = -1;
var mouseY = -1;
var entered = false;
var $box = $('.red-box');

setInterval(function () {
    posX += step;
    if (posX >= maxX) 
        posX = 0;
    $box.css("left", posX);

    var top = $box.offset().top;
    if (mouseX >= posX && mouseX <= (posX + $box.width()) && mouseY >= top && mouseY <= (top + $box.height())) {
        console.log("mouse entered");
        entered = true;
    } else if (entered) {
        console.log("mouse left");
        entered = false;
    }
}, 500);

$("#wrapper").on("mousemove", function (e) {
    mouseX = e.pageX - $(this).position().left;
    mouseY = e.pageY - $(this).position().top;
}).on("mouseleave", function()
{
    mouseX = -1;
    mouseY = -1;
});

FIDDLE

编辑：向包装器添加了一个新的 mouseleave() 事件。