javascript - Div 在悬停时闪烁

Question

我在这里阅读了很多问题，但找不到解决此问题的问题。我编写了一个 div 来跟随我的光标。我只希望它在光标位于#backgroundiv 上时出现。我已经让它工作了，但它有时会在 chrome 上随机闪烁并在 firefox 上完全消失。更随机的是它有时似乎工作然后开始闪烁。我尝试了从悬停到 mouseenter/mouseover 的各种方法，但似乎没有任何效果。

我想要的是当光标位于#backgroundiv 上时出现#newdot，然后跟随光标围绕div。任何帮助将不胜感激。

//hide dot when leaves the page
$(document).ready(function() {
  $("#backgroundiv").hover(function() {
    $("#newdot").removeClass("hide");
  }, function() {
    $("#newdot").addClass("hide");
  });
});

//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
  //below centres the div
  var newdotwidth = $("#newdot").width() / 2;
  $('#newdot').css({
    left: e.pageX - newdotwidth,
    top: e.pageY - newdotwidth
  });
});
//tried below too but it doesn't work
/*$(document).ready(function(){
           $("#backgroundiv").mouseenter(function(){
           $("#newdot").removeClass("hide");
           });
           $("#backgroundiv").mouseout(function(){
           $("#newdot").addClass("hide");
           });
        }); */

#backgroundiv {
  width: 400px;
  height: 400px;
  background-color: blue;
  z-index: 1;
}

#newdot {
  width: 40px;
  height: 40px;
  background-color: red;
  position: absolute;
  z-index: 2;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="newdot"></div>
<div id="backgroundiv"></div>

Answer 1

没有问题，但这是一种合乎逻辑的行为，当您将鼠标悬停在蓝色 div 上时，您会触发 mouseenter，因此您删除了该类，您会看到红色的，但是当您将鼠标悬停在红色的 div 上时，您会触发 mouseleave 从蓝色 div 中添加类，然后隐藏红色类。现在红色被隐藏了，您再次触发蓝色 div 上的 mouseenter，然后再次删除该类，显示红色 div，依此类推……这就是闪烁。

为避免这种情况，您可以考虑将鼠标悬停在红色框上，当您从蓝色框失去悬停时，红色框会出现在它的悬停上。

$(document).ready(function() {
  $("#backgroundiv").hover(function() {
    $("#newdot").removeClass("hide");
  }, function() {
    $("#newdot").addClass("hide");
  });
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
  //below centres the div
  var newdotwidth = $("#newdot").width() / 2;
  $('#newdot').css({
    left: e.pageX - newdotwidth,
    top: e.pageY - newdotwidth
  });
});

#backgroundiv {
  width: 400px;
  height: 400px;
  background-color: blue;
  z-index: 1;
}

#newdot {
  width: 40px;
  height: 40px;
  background-color: red;
  position: absolute;
  z-index: 2;
}

.hide {
  display: none;
}


/* Added this code */

#newdot:hover {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot">
</div>
<div id="backgroundiv">
</div>