Div мерцает при наведении - PullRequest
Новая
       29

Div мерцает при наведении

0 голосов
/ 12 мая 2018

Я прочитал много вопросов здесь, но не могу найти тот, который исправляет это. Я запрограммировал div, чтобы следовать за моим курсором. Я только хочу, чтобы он появился, когда курсор находится над #backgroundiv. У меня это работает, но иногда оно случайным образом мерцает на Chrome и полностью исчезает на 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>

1 Ответ

0 голосов
/ 12 мая 2018

Существует не проблема, а логическое поведение: когда вы наводите курсор на синий div, вы запускаете mouseenter, поэтому вы удаляете класс и видите красный, НО, когда вы наводите красный, который вы вызываете mouseleave из синего цвета.div, таким образом, вы добавляете класс и скрываете красный.Теперь красный скрыт, вы снова запускаете mouseenter на синем div, и вы снова удаляете класс, и красный 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>
...