悬停时div闪烁

Question

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

我想要的是当光标在#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，因此您删除了该类，您会看到红色的，但是当您将红色的鼠标悬停在蓝色上时，您会触发 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>