Как очистить 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.info (left, top);
  });
  $('#2ndCol').mouseleave(function() {
    ('#button-hover').hide();
  });
});
</script>

Просто хотелось бы, чтобы функция mousemove была активна только при наведении курсора на ребенка (Корин). Столбец над ним #2ndCol

jquery mousemove mouseleave divi-theme

09.04.2019 23:27

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Технически #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.info (left, top);
});

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

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

Спасибо за вашу помощь, я использовал ваши обработчики, и он работает с существующим html.

— 10.04.2019 22:14

10.04.2019 00:59