Javascript 如何根据容器div在鼠标旁创建弹出窗口

当鼠标位于某个元素上时，我试图显示一个div，但该div始终位于容器div内。例如（将鼠标悬停在本页底部的任何模型上） 我尝试在页面中获取鼠标位置，在div中获取鼠标位置，但没有成功。提前谢谢

这是我用来显示和隐藏大div的主代码，但是隐藏的过程在显示警报时不起作用（默认情况下隐藏黑色div）

$（.homeModelItem”）.mouseenter（函数（）{
变量鼠标={x:0，y:0}；
document.addEventListener（'mousemove'，函数（e）{
mouse.x=e.clientX | | e.pageX；
mouse.y=e.clientY | | e.pageY；
console.log（mouse.x）；
if（mouse.x0）{
$（“.black”）.css（{“left”：“200px”，“display”：“block”}）；
}
});
});
$（“.homeModelItem”）.mouseout（函数（）{
警报（“xxx”）；
$（“.black”）.css（{“display”：“none”，“left”：“0”}）；
});

每次鼠标进入

.homeModelItem

时，您都会添加一个新的mousemove侦听器。在该处理程序中，为

.black

设置

display:block

，这将覆盖隐藏在mouseleave处理程序中

看起来您想定位与当前悬停的

.homeModelItem

相关的

.black

。例如，您可以这样做：

$(".homeModelItem").mouseenter(function (e) {
    $(e.target).append($('.black')); // Move the .black to the target element
    $(".black").css({
        display: "block"
    });
});

$(".homeModelItem").mouseleave(function (e) {
    $(".black").css({
        display: "none"
    });
});

添加到

.homeModelItem

CSS：

position: relative;

left: 100px;
top: 0px;
z-index: 100;

和

.black

CSS：

position: relative;

left: 100px;
top: 0px;
z-index: 100;

---

如果您需要mousemove，您可以将其添加到任何事件处理程序之外（除非您将在另一个处理程序中删除它）。

这要好得多，但是：数百名用户向我解释了“不工作”的含义，但我仍然不知道它的确切含义。你能解释一下吗…我想做的第一件事是，如果光标留下黑色的div，就把它隐藏起来。homeModelItem div这是小提琴，它已经更新了，非常接近我需要的东西。你可以把它添加到你的答案中，如果你需要修改的话，如果你看一下的话，我真的很感激。非常感谢。根据你的新小提琴更新答案会让未来的访问者感到困惑，因为问题中没有描述这种行为。无论如何，考虑到您的真实页面上有一堆

.homeModelItem

，您可以检查以减少事件处理程序和代码。