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

试图在离开id#2ndCol时使悬停按钮消失

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

开发人员站点位于：

试图理解和研究这一点：

但还是超级新手

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

jQuery（函数（$）{
$（'#2ndCol'）.mousemove（函数（事件）{
var left=event.pageX-$（this）.offset（）.left+-75；
var top=event.pageY-$（this）.offset（）.top+-30；
$（'#按钮悬停'）.css（{top:top，left:left}）.show（）；
console.log（左，顶部）；
});
$（'#2ndCol'）.mouseleave（函数（）{
（“#按钮悬停”）.hide（）；
});
});

---

只希望鼠标移动功能仅在将鼠标悬停在孩子（Corin）上方时才处于活动状态。他上方的柱子是#2ndCol

这真奇怪

从技术上讲，

#按钮悬停

是

#2ndCol

的子项。所以，当鼠标“向外”移动时，光标仍在子对象上。。。这对父母来说是个泡泡

我建议您将

#按钮悬停在
#2ndCol
之外。现在它将“闪烁”，因为在一瞬间，鼠标将进入/退出。。。要避免这种情况，请将
指针事件：none
添加到
#按钮悬停

好的。。。但是你在按钮里面有一个可点击的链接，现在不监听指针事件。解决方案是重新考虑该链接的位置：

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

并将其保存在
#悬停按钮中（页面中的其他位置）：

所以如果你跟着我。。。你现在应该有一个“化妆品”按钮显示在悬停。。。以及由“area”div处理的单击

这应该更有效
 真奇怪

从技术上讲，
#按钮悬停
是
#2ndCol
的子项。所以，当鼠标“向外”移动时，光标仍在子对象上。。。这对父母来说是个泡泡

我建议您将
#按钮悬停在
#2ndCol
之外。现在它将“闪烁”，因为在一瞬间，鼠标将进入/退出。。。要避免这种情况，请将
指针事件：none
添加到
#按钮悬停

好的。。。但是你在按钮里面有一个可点击的链接，现在不监听指针事件。解决方案是重新考虑该链接的位置：

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

并将其保存在
#悬停按钮中（页面中的其他位置）：

所以如果你跟着我。。。你现在应该有一个“化妆品”按钮显示在悬停。。。以及由“area”div处理的单击

这应该更有效
 感谢您的帮助，我使用了您的处理程序，它可以与现有的html一起工作。感谢您的帮助，我使用了您的处理程序，它可以与现有的html一起工作。
<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);
});