Javascript 对于一个网站：我如何使图像只在某个区域跟随鼠标指针？

我对网页设计和javascript非常陌生，所以请容忍我

我想一个图像出现在鼠标指针旁边，但只有当它通过我的网站的某个区域移动

到目前为止，我已经学会了如何使用以下方法使图像跟随鼠标指针：

//(html)
<img id="image" src="image.jpg"/>

//(css)
#image{
position:absolute;
} 

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

/（html）
//（css）
#形象{
位置：绝对位置；
} 
//（js）
$（文档）.mousemove（函数（e）{
$（“#image”）.css（{左：e.pageX，上：e.pageY}）；
});

---

有没有人能向我解释一下，当鼠标指针在网站的某个区域之外时，我如何将其限制在网站的某个区域，并隐藏图像？

为什么不在

mousemove

事件中进行检查

var
    hoverBox   = $('.box-selector'),
    hoverImage = $('#image');

hoverBox.mousemove(function(e) {
    hoverImage.css({
        left: e.pageX,
        top:  e.pageY
    });
}).mouseout(function() {
    hoverImage.css({
        left: -10000,
        top:  -10000
    });
});

$(document).mousemove(function(e){
    if (e.pageX > MINX && e.pageX < MAXX && e.pageY > MINY && e.pageY < MAXY) {
        $("#image").css({left:e.pageX, top:e.pageY});
    }
});

$（文档）.mousemove（函数（e）{
如果（e.pageX>MINX&&e.pageXMINY&&e.pageY

这个怎么样

那么，如何使用这个HTML结构呢。chaser是将图像放置在其中的div，而容器划定了跟随鼠标的区域

  <div class="container">
     <div class="chaser"></div>
  </div>

您需要获得@Deep所述的pageX和PageY。如果您计划移动容器，那么还应该考虑div.container的位置。当您最终获得相对于容器的位置时，您将更新追逐器的位置

(function($){
    $(document).ready(function(){
    $('div.container')
    .on('mouseenter', followMe)
    .on('mouseleave', hideChaser);

  });

  function followMe(){
        $(this).on('mousemove', function(e){
            var chaser = $('div.chaser') ; 
            var container = $(this);
            var position = container.position();
            var xpos, ypos;            
               console.log("Client("+e.clientX+","+e.clientY+"),Page("+e.pageX+","+e.pageY+")"); 
           xpos = e.pageX - position.left; //get relativePos
           ypos = e.pageY - position.top; //get relativePos
           chaser.css({
            display: 'block',
            position: 'absolute',
            left: xpos,
            top: ypos
           });  
      })
  }

  function hideChaser(){
    $('div.chaser').css({
      display: 'none'
    }); 
  }

})(jQuery)

（函数（$）{
$（文档）.ready（函数（）{
$（'div.container'）。在（'mouseenter'，followMe）上
.on（'mouseleave'，hideChaser）；
});
函数followMe（）{
$（this）.on（'mousemove'，函数（e）{
var chaser=$（'div.chaser'）；
var容器=$（此）；
var position=container.position（）；
var xpos，ypos；
log（“客户端（“+e.clientX+”，“+e.clientY+”），第页（“+e.pageX+”，“+e.pageY+”））；
xpos=e.pageX-position.left；
ypos=e.pageY-position.top；
chaser.css({
显示：“块”，
位置：'绝对'，
左：XPO，
顶部：ypos
});
})
}
函数hideCaser（）{
$（'div.chaser'）.css({
显示：“无”
});
}
})（jQuery）

div.container{
利润率：50像素20像素；
高度：200px；
宽度：200px；
边框：1px纯色灰色；
背景颜色：灰色；
}
分区容器>分区追逐器{
高度：5px；
宽度：5px；
边框：1px纯白；
背景色：白色；
}

---

谢谢你，奥马尔。这正是我希望它的工作方式。

(function($){
    $(document).ready(function(){
    $('div.container')
    .on('mouseenter', followMe)
    .on('mouseleave', hideChaser);

  });

  function followMe(){
        $(this).on('mousemove', function(e){
            var chaser = $('div.chaser') ; 
            var container = $(this);
            var position = container.position();
            var xpos, ypos;            
               console.log("Client("+e.clientX+","+e.clientY+"),Page("+e.pageX+","+e.pageY+")"); 
           xpos = e.pageX - position.left; //get relativePos
           ypos = e.pageY - position.top; //get relativePos
           chaser.css({
            display: 'block',
            position: 'absolute',
            left: xpos,
            top: ypos
           });  
      })
  }

  function hideChaser(){
    $('div.chaser').css({
      display: 'none'
    }); 
  }

})(jQuery)