1

尝试在离开 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>


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

4

1 回答 1

0

这是一个奇怪的...

从技术上讲，#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处理。

那应该会更好。;)

于 2019-04-09T22:59:17.643 回答