javascript – Jquery – 为mouseout扩展’perimeter’的技巧？

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

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

解决方法

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

http://jsbin.com/exulef/2/edit

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/

原文地址：https://www.jb51.cc/jquery/158840.html