javascript - 如果它在 div 之外，如何防止跟随 img 光标？

Question

如果用户将光标移动到 block #mouse-pointer 之外，它会在菜单和其他 div 下消失。想让图像仅在光标位于 id #mouse-pointer 的 block 内时跟随光标。

$(function (){
    $(window).mousemove(function(event) {
        $('#mouse-pointer').css({
            'top' : event.pageY -100 + 'px',
            'left' : event.pageX -100 + 'px'
        });
    }); 
});

html

<style>
#my-container{
position: relative;
width:100vw;
height: 600px;
overflow-x: hidden !important;
overflow-y: hidden !important;
cursor: none;
}
</style>
<div id="my-container">
<div id="lg-top-image"  data-src="img/image_above.jpg"></div>
<div id="lg-bottom-image" data-src="img/image_below.jpg"></div>
<figure id="mouse-pointer"></figure>
</div>

Answer 1

如果您希望事件仅从某个元素触发，则不应在窗口上添加事件监听器。改为这样做:

$('#my-container').on('mousemove', function() {
   $('#mouse-pointer').css({
        'top' : event.pageY -100 + 'px',
        'left' : event.pageX -100 + 'px'
    });
});