元素移动时悬停不正确

Question

我有一个动态div，我想知道鼠标何时悬停这个div。我尝试使用.is( ':hover' )但不起作用。

jsFiddle demo

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

永远不要在控制台中写日志。

始终将日志写入控制台，即使该框已消失。

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

Answer 1

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

示例：

HTML＆amp; 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()事件。