我可以看看我的光标是否在某个区域上？

Question

我的意思是，我想检查（在.hover函数上）我的光标指针是否进入区域。

This就是一个例子：

HTML

<ul class="menuLeft">
    <li>1</li>
    <li>2</li>    
    <li>3</li>    
</ul>    

的jQuery

$('.menuLeft > li').hover(
    function() {
        alert("i'm into UL");
    },
    function() {
        //if the cursor, when I leave a li, is into the ul, print "IN", else "OUT"
    }
);

Answer 1

您可以将鼠标位置与ul的位置和宽度/高度进行比较

function(e) {
    var ul =  $('#someUL');
    var offset = ul.offset();
    var width = ul.width();
    var height = ul.height();
    if(e.pageX >= offset.left && e.pageX <= offset.left + width && e.pageY >= offset.top &&       e.pageY <= offset.top + height) {
     console.log('IN');
    } else {
      console.log('OUT');
    }
}

Answer 2

我不能说我完全理解这个问题。看起来你想要在输入LI时触发“in”并在你完全离开UL时触发“out”。但是，由于“输入”可以通过输入UL而不是LI来轻松触发，为什么不这样做呢？

http://jsfiddle.net/429zG/

var $menuLeft = $('ul.menuLeft');
$menuLeft.hover(
    function() {
        $menuLeft.addClass('hovered');
    },
    function() {
        $menuLeft.removeClass('hovered');
    }
);

（hovered班级只有background-color: green）

尝试使用警报跟踪代码的成功对于鼠标事件来说将是棘手的，这就是我只是添加或删除类的原因。

如果你想跟踪LI悬停和UL悬停，你只需要绑定两个不同的事件处理程序。

http://jsfiddle.net/429zG/1/

（代码未粘贴;它所做的只是使用LI选择器绑定另一个事件，该选择器在悬停时更改每个LI的背景颜色）

Answer 3

令人困惑的问题，但请查看mouseenter和mouseleave。它们用于处理嵌套对象。