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