如何使HTML元素仅在悬停时跟随光标，而不是其他方式？

Question

我只想在这篇文章的前言中加上免责声明，我是javascript / jquery的初学者，如果解释/示例变慢，我会非常感激:)

为了清晰起见，编辑帖子以缩小问题：我希望HTML元素仅在光标悬停时才跟随光标; 一旦光标“离开”元素，我希望元素停止其后续。

到目前为止，我已经找到了代码（来自w3schools： https ： //www.w3schools.com/jquery/event_hover.asp和另一篇关于StackOverflow的文章： 如何在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>