Javascript 元素移动时悬停不正确

我有一个动态div，我想知道鼠标何时悬停在这个div上。我尝试了

.is（'：hover'）

，但不起作用

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

从不在控制台中写入日志

始终在控制台中写入日志，即使盒子不见了

---

是虫子还是我弄错了？如何正确检测悬停？

您应该使用事件跟踪鼠标移动，并检查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>

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;
});

。红色框{
显示：内联块；
位置：绝对位置；
宽度：50px；
高度：50px；
顶部：10px；
左：0px；
背景色：红色；
}
#包装纸{
高度：100vh；
宽度：100vw；
}

JavaScript:

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

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;
});

var posX=0；
var阶跃=10；
var maxX=200；
var mouseX=-1；
var-mouseY=-1；
输入的var=假；
变量$box=$（'.redbox'）；
setInterval（函数（）{
posX+=step；
如果（posX>=maxX）
posX=0；
$box.css（“左”，posX）；
var top=$box.offset（）.top；
如果（mouseX>=posX&&mouseX=top&&mouseY onmouseover对你有帮助吗？这就是你要找的吗？你能更清楚地提到你期望的吗？我必须知道鼠标是否在一个创建的对象上，但我还没有移动鼠标。检查这个jsbin，它有帮助吗？
似乎
：hover
伪类只更新了鼠标移动。每次更新鼠标位置时，您可能需要将鼠标位置与框位置进行比较，以手动检查是否悬停。@Wishy-如果您对鼠标保持坚定，则不起作用。这个想法很好，但最后我意识到它不能正常工作。在您的小提琴中尝试此方法，将鼠标保持在矩形的路径上，然后尝试将其移出在矩形移动的同一路径行中的窗口。因此，即使鼠标移出窗口，鼠标的最后存储值仍然指向路径行。因此，mouseenter和mouseleave仍然不断被击中，以更好地解释将鼠标保持在矩形移动的路径中，然后从结果窗口水平移动到jav小提琴中的一个脚本窗口。因此，上次记录的鼠标移动指向结果窗口中最左边的点。当矩形重置或再次从左边开始移动时，鼠标的“回车”和“回车”将被点击。@Wishy我已更新了答案。包装器div上的mouseleave事件将对抗此行为。太好了。哈哈，我尝试了更长的时间方法，但当鼠标移得更快时出现问题。您的更新答案应该工作得很好