Question

我想实现这样的行为，当鼠标指针悬停在某个div上时会触发mouseover / hover事件，但是当指针离开div时，mouseout事件不会触发，但是当它离开区域10px时我们的div。

有没有办法实现这一点，不涉及创建一个更大的父div来绑定mouseout事件？

Answer 1

我的评论让我感兴趣，看看它是否可能，而且实际上很容易。不知道它在不同的浏览器和大量的div中运行得如何，但它在这个例子中起作用：

var hello = $('#hello');
var position = hello.offset();
var height = hello.height();
var width = hello.width();

$(document).mousemove(function(e) {
  if (hello.data('inside')) {
    if ((e.pageX < position.left - 10 || e.pageX > position.left + width + 10) || 
       (e.pageY < position.top - 10 || e.pageY > position.top + height + 10)) {
      hello.text(position.top + " : " + position.left + " : " + e.pageX + " : " + e.pageY + "  Outside")
        .data('inside', false);
    }
  }
  else {
    if ((e.pageX > position.left && e.pageX < position.left + width) && 
        (e.pageY > position.top && e.pageY < position.top + height)) {
      hello.text(position.top + " : " + position.left + " : " + e.pageX + " : " + e.pageY + "  Inside")
        .data('inside', true);
    }
  }  
});

你好只是一个方形div。很容易变成一个插件，我可能会在以后做，哈哈。

编辑 - 我最后把它变成了一个插件：http://jmonkee.net/wordpress/2011/09/07/jquery-extended-hover-plugin/

Answer 2

有一种方法可以在没有外部div的情况下做到这一点，但这意味着即使没有徘徊，你的div也会有余量。

它使用填充在div内部，边距在外面的事实。

当没有任何反应时，我们有一个保证金，我们必须进入div内盘旋。
当它悬停时，边距变为填充，这样当鼠标离开div时，我们会在div中更多一点。
当我们离开填充物时，它会回到边缘。

css类似于：

.a{
   margin:10px;
}
div.b{
   padding:10px;
   margin:0;
}

请注意，有一个更具体的b选择器非常重要，以便在不使用重要内容的情况下应用它而不需要注意顺序。

js将是：

$(".a").bind("mouseenter",function(){
    $(this).addClass("b");
}).bind("mouseleave",function(){
    $(this).removeClass("b");
});

此处示例：http://jsfiddle.net/ynecV/

Answer 3

嗯，我会把另外一个包装所需的div并将鼠标悬挂在它上面 - 这将是最可靠的解决方案。

但是，如果你坚持不创建另一个div，那么我将绑定自定义mousemove处理程序，该处理程序将在div上的mouseenter上绑定（在文档上），并且会检测到鼠标移离div边界框的事实超过10px的。如果是这样，mousemove处理程序将触发自定义jQuery事件，然后它将取消绑定。

Jquery - 为mouseout扩展'perimeter'的技术？

3 个答案: