.mouseleave() 仅在移出特定边界时激活

【问题标题】：.mouseleave() activate only when moving out of specific border.mouseleave() 仅在移出特定边界时激活
【发布时间】：2016-10-16 09:17:19
【问题描述】：

当鼠标悬停在另一个 div 上时，我正在尝试创建一个汇总 div。它会打开，但我希望它在通过底部边框离开时不要关闭。是否可以使用 JS 或 JQuery？这是我当前的代码：

$("#sell1").mouseenter(function(){
        $("#rollup1").css("display","inline");
    });
    $("#rollup1").mouseleave(function(){
        $("#rollup1").css("display","none");
    });
    $("#sell1").mouseleave(function(){
        $("#rollup1").css("display","none");
    });

【问题讨论】：

也发布html
我一点也不擅长 javascript，但我设法尝试了像 this 这样的替代解决方案。

标签： javascript jquery html css

【解决方案1】：

在处理mouseleave时，可以获取元素的尺寸，查看事件的pageY是否在元素下方：

$("#rollup1").mouseenter(function() {
  $("#status").text("Over the element...");
});
$("#rollup1").mouseleave(function(e) {
  var $this = $(this);
  var bottom = $this.offset().top + $this.height();
  if (bottom < e.pageY) {
    $("#status").text("Left via bottom edge");
  } else {
    $("#status").text("Left NOT via bottom edge");
  }
});

#rollup1 {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

<div id="status">&nbsp;</div>
<div id="rollup1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：