根据鼠标位置移动div

我正在尝试创建并生成垂直列表，并且将鼠标悬停在鼠标上时，单独的“光标”div应沿着此列表垂直上下移动与你的指针对齐。根据鼠标位置移动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}); 
});

所有这方面的工作，但光标股利不完全与我的鼠标指针对准。它的确如果你真的慢而且精确地移动，但是如果你移动得更快一点，它就不会。是否有任何技术原因导致精度不足，或者我的代码错误？

这里是一个的jsfiddle http://jsfiddle.net/txks3wtj/

来源

2014-09-11 alemur

你能否创建一个显示确切问题的http://jsfiddle.net。如果没有看到您的HTML，很难想象。 – 2014-09-11 08:34:20

同意@RoryMcCrossan也可以调用'translateY'，例如用一个'mouseY'的值为100解析为'translateY（100px）;'这可能是错误的，因为'100px'是一个字符串，需要被包装在引号中。 – 2014-09-11 08:36:08

您可能还有更多的运气，使用'top，left，right ...'等CSS属性进行绝对定位的div。等等。 – 2014-09-11 08:37:16

小提琴肯定会有所帮助。但是，如果我正确理解您的代码，我相信您不能只更新.cursor在.sidebarnav的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');

EDIT2：你可能有更好的结果mouseenter和mouseleave太，我认为。我想一旦你把元素的一个孩子悬停，就会触发over/out触发器。

来源

2014-09-11 08:39:56 powerbuoy

根据鼠标位置移动div

回答

相关问题