Javascript 根据鼠标位置移动div

我正在尝试创建一个垂直列表，当你用鼠标悬停它时，一个单独的“cursor”div应该沿着这个列表垂直上下移动，并与指针水平对齐

我正在使用以下代码：

$(document).mousemove( function(e) {
   mouseY = e.pageY;
   mouseX = e.pageX;
   translateY = 'translateY(' + mouseY + 'px)';
   translateX = 'translateX(' + mouseX + 'px)';
});

然后使用jQuery：

$(".sidebarnav").mouseover(function(){
  $('.sidebarnav .cursor').css({'transform': translateY});
});

所有这类工作，但游标div没有完全与我的鼠标指针对齐。如果你移动得很慢而且很精确，它会发生，但是如果你移动得快一点，它不会发生。这种精度的缺乏有什么技术原因，还是我的代码错了

这是一个jsfiddle

---

小提琴肯定会有帮助。但是，如果我正确理解了您的代码，我相信您不能只更新

.sidebarnav

的

.cursor

在

.mouseover

上的位置-相反，您需要随时更新它在

mousemove

上的位置

由于您不希望光标在不悬停侧边栏时移动，因此需要跟踪光标是否悬停。比如：

var isOver = false;

$('.sidebarnav').mouseover(function () {
    isOver = true;
}).mouseout(function () {
    isOver = false;
});

$(document).mousemove( function(e) {
    mouseY = e.pageY;
    mouseX = e.pageX;
    translateY = 'translateY(' + mouseY + 'px)';
    translateX = 'translateX(' + mouseX + 'px)';

    if (isOver) {
        $('.sidebarnav .cursor').css({'transform': translateY});
    }
});

未经测试

编辑：如果同时缓存查询，将提高性能

var sidebar = $('.sidebarnav');
var cursor = sidebar.find('.cursor');

---

编辑2：我认为，使用

mouseenter

和

mouseleave

可能会有更好的效果。我认为，只要悬停元素的子元素，就会触发over/out。

能否创建一个显示确切问题的脚本。如果不看到HTML，很难进行可视化。同意@Rorymcrossan的说法，您对

translateY

的调用将使用

mouseY

值，例如100 resolve to

translateY（100px）

这是错误的，因为

100px

是一个字符串，需要用引号括起来。使用

top、left、right…

等的CSS属性，使用绝对定位的div可能会更幸运。