我想实现这样的行为,当鼠标指针悬停在某个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/
