Div 悬停时闪烁

Div flickers on hover

我在这里阅读了很多问题,但找不到解决此问题的问题。我编程了一个 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>

没有问题,但这是一种合乎逻辑的行为,当您将鼠标悬停在蓝色 div 上时,您会触发 mouseenter,因此您移除 class,然后您会看到红色的,但是当您悬停你从蓝色 div 触发 mouseleave 的红色,这样你就添加了 class 并隐藏了红色。现在红色被隐藏了,你再次触发蓝色 div 上的 mouseenter,你再次移除 class,显示红色 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>