jQuery mousemove（游标“概述”）计算错误

我正试图创建一个文档/光标“MapOverview”，但是我在计算时卡住了。指针仍超出“概述”框

到目前为止：

---

我知道，这不是使用百分比的最佳方法，但我不知道如何计算正确的尺寸。。。有什么更好的建议吗？

光标将始终与框的边框重叠，因为

a） 它的定义宽度大于1

b） 您将其放置在实际位置的右下角，使其与右下角和右下角重叠

c） 应将框的溢出设置为隐藏

见示例：

编辑：适应JSFIDLE的最新变化

CSS:

jQuery：

$(window).on('mousemove', function(e) {

   var pageX = e.clientX;
   var pageY = e.clientY;
   var winW = $(this).width();
   var winH = $(this).height();

   if(pageX > winW-5) pageX = winW-5; // deal with scrollbar

   var boxWidth = 172;
   var boxHeight = 172;

   var posX = pageX / winW * boxWidth;
   var posY = pageY / winH * boxHeight;

   pointer.css({
      top: posY + 'px',
      left: posX + 'px'
   });

});

---

你到底想完成什么？试图“捕捉”网站上的菜单项似乎很烦人。@Jurgenstilart如前所述，我试图重建以下部分或更确切地说是其中的一部分……是的，你的想法是正确的，但这并不能解决我的问题：P“指针”仍然在框上方/下方：你只能通过“调整”实际屏幕到虚拟屏幕来避免这种情况，忽略外部部分（例如，每个方向10个左右像素）。您可以使用

if（pageXHmm…我认为有一个更好的解决方案；）这样的构造来实现这一点，如果您使用灰色框的x/y尺寸减去光标框和滚动条的宽度/高度（！），则可以使用百分比来计算正确的尺寸你会得到一个总的xa/ya，你可以根据屏幕的实际宽度和高度进行设置：哇，看起来不错！谢谢:-*
#box {
   position: fixed;
   bottom:0;
   left:0;
   width: 180px;
   height: 180px;
   background: #aaa;
   overflow: hidden;
}

$(window).on('mousemove', function(e) {

   var pageX = e.clientX;
   var pageY = e.clientY;
   var winW = $(this).width();
   var winH = $(this).height();

   if(pageX > winW-5) pageX = winW-5; // deal with scrollbar

   var boxWidth = 172;
   var boxHeight = 172;

   var posX = pageX / winW * boxWidth;
   var posY = pageY / winH * boxHeight;

   pointer.css({
      top: posY + 'px',
      left: posX + 'px'
   });

});