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

Question

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

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