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

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侦听.homeModelItem 。 在该处理程序中，为.black设置display: block ，这将覆盖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;

jsFiddle上的现场演示 。

如果您需要将鼠标移动到某个地方，则可以将其添加，但是可以将其添加到任何事件处理程序之外（除非您将其移至另一个处理程序中）。