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是否在元素下方：

＆＃13;

$("#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");
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

.mouseleave（）仅在移出特定边界时激活

1 个答案: