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

只是当鼠标悬停在孩子（Corin）上时，只需将mousemove功能激活即可。他身上的专栏是＃2ndCol

Answer 1

那是一种陌生感......

从技术上讲，#button-hover是#2ndCol的孩子。因此，当鼠标移出“out”时，光标仍然在一个孩子身上......并且这会冒泡到父母身上。

我建议你从#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处理。

这应该会更好。 ;）