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

我正在尝试在鼠标悬停在另一个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");
    });

最佳答案

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