使用 Jquery 离开 ID div 时如何清除 mousemove

Question

尝试在离开 ID #2ndCol 时使悬停按钮消失。

由于某些原因，当鼠标悬停在主页横幅上的其他按钮上时，悬停按钮没有隐藏。

开发站点在这里： http://buildhopedev.wpengine.com/

尝试理解和调查： jquery mousemove how to stop

不过还是超级新手。

<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>

只是希望 mousemove 功能仅在悬停在孩子 (Corin) 上时才处于活动状态。他上方的专栏是#2ndCol

Answer 1

真奇怪...

从技术上讲，#button-hover 是 #2ndCol 的子代。因此，当鼠标移动 "out" 时，光标仍然在一个子项上...然后向上冒泡到父项。

我建议你从 #2ndCol 中选择 #button-hover。现在会 "flicker"，因为在一瞬间，鼠标会 in/out... 要避免这种情况：将 pointer-events: none 添加到 #button-hover。

好的...但是您在该按钮内有一个可点击的 link，现在不监听指针事件。解决方案是重新考虑 link:

的位置

<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);
});

所以如果你关注我...你现在应该有一个 "cosmetic" 按钮显示在悬停时...并且点击由 "area" div.

这样应该效果更好。 ;)

使用 Jquery 离开 ID div 时如何清除 mousemove

How to clear mousemove when leaving ID div using Jquery

jquery

mouseleave

mousemove

divi-theme