Как очистить перемещение мыши при выходе из идентификатора div с помощью Jquery - PullRequest
Новая
       48

Как очистить перемещение мыши при выходе из идентификатора div с помощью Jquery

1 голос
/ 10 апреля 2019

Попытка заставить кнопку зависания исчезнуть при выходе из id # 2ndCol.

По какой-то причине кнопка наведения не прячется, когда мышь наводит курсор на другие кнопки на главном баннере.

сайт разработчика находится здесь: http://buildhopedev.wpengine.com/

Пробовал понять и разобраться в этом: jquery mousemove, как остановить

Но все еще супер новичок. 

<script>
jQuery(function($){
  $('#2ndCol').mousemove(function(event) {
    var left = event.pageX - $(this).offset().left + -75;
    var top = event.pageY - $(this).offset().top + -30;
    $('#button-hover').css({top: top,left: left}).show();
    console.log (left, top);
  });
  $('#2ndCol').mouseleave(function() {
    ('#button-hover').hide();
  });
});
</script>


Хотелось бы, чтобы функция перемещения мышью была активна только при наведении на ребенка (Корин). Столбец над ним - # 2ndCol

1 Ответ

0 голосов
/ 10 апреля 2019

Это странность ...

Технически, #button-hover - это ребенок #2ndCol.Поэтому, когда мышь перемещается «наружу», курсор все еще находится над дочерним элементом ... И это всплывает до родителя.

Я предлагаю вам иметь #button-hover из #2ndCol.Теперь это будет "мерцать", потому что в течение доли секунды мышь будет входить / выходить ... Чтобы избежать этого: Добавьте pointer-events: none к #button-hover.

Ладно ... Но у вас былкликабельная ссылка внутри этой кнопки, теперь не слушающая события указателя.Решение состоит в том, чтобы переосмыслить расположение этой ссылки: 

<a class="vp-a" href="http://buildhopedev.wpengine.com/wp-content/uploads/2019/04/LandmarkHomes_CureKids_BuildingHope_Small.mp4"><i style="color:#fff" class="far fa-play-circle"></i> <span style="color: #fff;"> WATCH CORINS’S STORY</span></a>

Вместо этого добавьте привязку якоря #2ndCol: 

<a class="vp-a" href="http://buildhopedev.wpengine.com/wp-content/uploads/2019/04/LandmarkHomes_CureKids_BuildingHope_Small.mp4">
  <div id="2ndCol">
    <!-- and the rest of it's content, without the #hover-button -->
  </div>
</a>

И сохраните это в #hover-button (где-тоеще на странице): 

<i style="color:#fff" class="far fa-play-circle"></i>
<span style="color: #fff;"> WATCH CORINS’S STORY</span>

Наконец, я предлагаю обработчики событий.
Один для мыши, один для мыши и один для перемещения мыши. 

$("#secondCol").on("mouseenter", function(){
  $('#button-hover').show();
});

$("#secondCol").on("mouseleave", function(){
  $('#button-hover').hide();
});

$("#secondCol").on("mousemove", function(){
  var left = event.pageX - $(this).offset().left + -75;
  var top = event.pageY - $(this).offset().top + -30;
  $('#button-hover').css({top: top,left: left});
  console.log (left, top);
});

Так что, если вы следили за мной ... Теперь у вас должна быть «косметическая» кнопка, отображаемая при наведении… И щелчок, обрабатываемый разделителем «области».

Это должно работать лучше.;)

...