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，因此您移除 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>

Div 悬停时闪烁

Div flickers on hover

javascript

jquery

css

hover

jquery-hover