Question

我正在尝试创建并生成具有垂直列表的位置，当您用鼠标悬停它时，单独的“光标”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 http://jsfiddle.net/txks3wtj/

Answer 1

小提琴肯定会有所帮助。但是，如果我正确理解您的代码，我相信您不能只更新.cursor mouseover上.sidebarnav的位置 - 而是需要更新其在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可能会有更好的结果。我认为只要您将元素的子元素悬停，就会触发/重复触发。

根据鼠标位置移动div

1 个答案: