Question

我希望我的元素在鼠标进入div时出现，然后跟随鼠标并在离开div后消失。

我将以下代码混合在一起。

HTML：

<div id='box' class="box">
   <img id="image" src="download.jpeg"/>
</div>

CSS：

#image {
    position:absolute;
    display: none;
}

JS：

$(document).mousemove(function(e){
    $("#image").css({
        left:e.pageX, 
        top:e.pageY
    });
});

$('.box').mouseenter(_=> {
    $('#image').show();
});

$('.box').mouseleave(_=> {
    $('#image').hide();
});

DEMO

预期的功能不一致，但是如果鼠标快速离开div，似乎可以正常工作。

Answer 1

img位于框内。当您将鼠标悬停并且图像进入光标下方时，您将始终处于始终状态（因为该位置位于DOM结构内部）。

这样修改您的DOM：

<div id='box' class="box"></div>
<img id="image" src="https://i5.walmartimages.ca/images/Large/580/6_r/875806_R.jpg"/>

然后修改您的CSS以使其包括：

#image {
    pointer-events: none;
}

应该完成您想要的。这也是一个Fiddle，其代码也已修改。

使元素出现并跟随div中的鼠标，并在鼠标离开div时消失

1 个答案: