jquery mouseleave通过div下边框的效果

Question

这让我抓狂。

有没有办法仅在将 div 穿过其底部边框时才触发 mouseleave jquery 效果？

也就是说，如果鼠标指针通过其他 3 个边框中的任何一个离开 div，则防止发生上述效果。

我想这一定是某种坐标问题，但位置和偏移对我来说都不是答案。

如果可以完成类似的事情，那么只要提供有关如何做到这一点的最微小的示例，我们将不胜感激。

如果已经提出（并回答）类似的问题，我们也将不胜感激任何重定向。

谢谢！

Answer 1

怎么样：

$("div").mouseleave(function(e){
    var $this = $(this);

    var bottom = $this.offset().top + $this.outerHeight();

   if(e.pageY >= bottom) alert("BOTTOM"); 
});

http://jsfiddle.net/uqcU6/6/

Answer 2

对于 HTML

<div></div>

、CSS

div {
    border:2px dashed lightblue;
    width:200px;
    height:200px;
    margin:20px 0 0 20px;
}

和 JavaScript

var divPosition = $('div').position();
var bottom = divPosition.top + $('div').height();
var left = divPosition.left;

$('div').mouseleave(function(e) {
    if (e.pageX > left && e.pageY > bottom) {
        console.log('bottom out');   
    }
});

或演示，控制台< /em> 仅当鼠标离开

底部时才会出现输出

Answer 3

快速的解决方案是将一个透明的 div 绝对定位到元素的底部，然后监听该 div 上的 mouseenter 来触发父 div 上的 mouseleave 。

Answer 4

如果您无法添加另一个 div，另一种解决方案是获取相关 div 的底部 y 坐标。并检查鼠标是否位于 mouseleave 事件中的下方。您可能需要检查 x1 < xm < x2，其中 x1 是 div 的左侧 x 坐标，x2 是 div 的右侧 x 坐标，xm 是鼠标的 x 坐标。

@kingjiv 用一个代码示例打败了我，但侧面检查可能会完善整个事情。

Answer 5

最简单的解决方案是使用包装器 div 并将 mouseleave 事件分配给包装器。

http://jsfiddle.net/AlienWebguy/TDCgM/

Answer 6

在 mouseLeave 处理程序中添加一个条件语句，用于检查鼠标是否低于元素的底部。如果是，则鼠标很可能从底部边框退出。

例子：

$("#yourDiv").mouseleave(function(e){
  if (e.offsetY >= $("#yourDiv").height() ){
    alert("perform the mouse leave action!");
  }

}）;