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

Попытка сделать так, чтобы кнопка наведения исчезала при выходе из 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


jquery mousemove divi-theme mouseleave
person Phil Botha    schedule 09.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Технически #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);
});

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

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

person Louys Patrice Bessette    schedule 09.04.2019
comment
Спасибо за вашу помощь, я использовал ваши обработчики, и он работает с существующим html. - person Phil Botha; 10.04.2019