如何使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)清除间隔

Answer 2

我会建议这些方面：

mouseover事件处理程序：set insideObject = true mouseout事件处理程序：set insideObject = false mousemove事件处理程序：if（insideObject）然后执行'follower'操作（否则什么都不做）

我不认为间隔计时器首先适合于此。

<style>
#myrect
{
 height:100px;
 width:100px;
 background-color:lightblue;
 position:absolute;
 left: 200;
 top: 200;
}
</style>

<div id=myrect> 
  XYZ
</div>

<script>
var following=false;
function gotIn()
{
 following = true;
 setDark();
}
function gotOut()
{
 following = false;
 setLight();
}
function moved(e)
{
 if (!following) return;
 var x = e.pageX;
 var y = e.pageY;
 var r = document.getElementById("myrect");
 r.style.left = x - 10;
 r.style.top = y - 10;
}
function setDark()
{
 document.getElementById("myrect").style.backgroundColor = "#00f";
}
function setLight()
{
 document.getElementById("myrect").style.backgroundColor = "lightblue";
}

document.getElementById("myrect").addEventListener('mousemove', moved, false);
document.getElementById("myrect").addEventListener('mouseover', gotIn, false);
document.getElementById("myrect").addEventListener('mouseout', gotOut, false);
</script>