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

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

我已经将以下代码混合在一起

HTML:

JS:

---

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

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"/>

---

应该完成你想要的。这是一个带有修改过的代码的列表。

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"/>

---

应该完成你想要的。这里还有一个修改过的代码。

我想让它按照我所描述的那样工作。我希望鼠标离开父元素后图像立即消失。我想让它按照我所描述的那样工作。我希望图像在鼠标离开父元素后立即消失。我假设它在页面上img所在的位置起作用！谢谢，有没有不关闭指针事件的方法？我正在做一个项目，我想要一个不同的指针事件，但我的图像闪烁。我假设它在页面上img的位置工作！谢谢，有没有不关闭指针事件的方法？我正在做一个项目，我想要一个不同的指针事件，但我的图像闪烁。

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

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

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

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

#image {
    pointer-events: none;
}