Question

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

我想要的是#newdot在光标位于#backgroundiv之后出现，然后按照光标在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所以你删除了这个类，当你将你触发的红色鼠标悬停在{{1}时，你会看到红色的那个从蓝色div，因此你添加类，你隐藏红色的。现在红色被隐藏，你再次触发蓝色div上的mouseleave并再次删除该类并显示红色div，依此类推......这就是闪烁。

为了避免这种情况，你可以考虑将鼠标悬停在红色框上，当你从蓝色悬停中丢失悬停时，红色框会出现在悬停中。

mouseenter

$(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;
}

Div在悬停时闪烁

1 个答案: