Question

我试图在鼠标悬停在元素上时显示div但div总是在容器div中。示例（将鼠标悬停在本页底部的任何模型上）https://3dexport.com/ 我试图让鼠标在页面中的位置和鼠标在div中的位置但是没有用。提前谢谢。

这是我用来显示和隐藏大div的主要代码，但隐藏进程在显示警报时无法正常工作（默认情况下隐藏黑色div）

$(".homeModelItem").mouseenter(function(){
var mouse = {x: 0, y: 0};

document.addEventListener('mousemove', function(e){
    mouse.x = e.clientX || e.pageX;
    mouse.y = e.clientY || e.pageY;
    console.log(mouse.x);
    if(mouse.x<400 && mouse.x>0){
        $(".black").css({"left":"200px","display":"block"});
    }

});
});

$(".homeModelItem").mouseout(function(){
alert("xxx");
$(".black").css({"display":"none","left":"0"});
});

Answer 1

每次鼠标进入.homeModelItem时，您都会添加一个新的mousemove侦听器。在该处理程序中，为display: block设置.black，这将覆盖mouseleave处理程序中的隐藏。

您似乎希望定位与当前悬停的.black相关的.homeModelItem。你可以这样做：

$(".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;

和.black CSS：

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

A live demo at jsFiddle

如果您需要将鼠标移动到某处，可以添加它，但在任何事件处理程序之外（unles，您将在另一个处理程序中将其删除）。

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

1 个答案: