javascript - 如何使 HTML 元素仅在悬停时跟随光标，否则不跟随？

Question

我只想在这篇文章的开头声明我是 javascript/jquery 的初学者，如果解释/示例进展缓慢，我将不胜感激 :)

为清楚起见，编辑帖子以缩小问题范围:我希望 HTML 元素仅在光标悬停时跟随您的光标；一旦光标“离开”该元素，我希望该元素停止其跟随。

到目前为止，我已经找到代码(来自 w3schools:https://www.w3schools.com/jquery/event_hover.asp 和 StackOverflow 上的另一篇文章:how to animate following the mouse in jquery)来实现“跟随光标”功能并使其仅在光标悬停在元素上时才会发生: https://jsfiddle.net/rtwrtw8/og7ej0n8/

$(document).ready(function(){
  $("#follower").hover(function(){
    var mouseX = 0, mouseY = 0;
$(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.css({left:xp, top:yp});
    
}, 30);
    }, function(){
    $(this).css("background-color", "pink");
  });
});

#follower{
  position : absolute;
  background-color : red;
  color : white;
  padding : 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="follower">Starts following once hovers</div>

然而，问题是即使光标不再悬停在元素上，框仍会继续跟随光标(如代码中指定的那样，框变成粉红色可以确认这一点)。相反，框应该只停留在光标最后悬停在它上面时的位置。

如果有人对如何实现此功能有任何建议或知道任何工作示例，我将不胜感激!提前致谢!

Answer 1

一旦开始收听 mouseMove，您需要在鼠标离开元素时使用 off('mousemove') 停止收听

尝试改变:

$(this).css("background-color", "pink");

到

$(this).off('mousemove').css("background-color", "pink");

您还应该使用 clearInterval(intervalId) 清除间隔