jquery - 仅当鼠标沿垂直方向移动时才触发 mouseleave 事件

Question

我有一个作为主导航的 ul。我在那个 ul 里面有一个 li，当鼠标悬停在上面时，它会滑下一个隐藏的 div，其中包含一堆信息。该 div 显示在主导航的正下方。如果用户在主导航之外垂直移动鼠标，我想让 div 隐藏自身。如果他们将鼠标移到 div 上，我需要保留它，以便他们可以单击位于那里的链接。

下面是一些代码:

<ul>
<li> <a href="#">item one </a></li>
<li id="locations"> <a href="#">item two </a> </li>       
<li> <a href="#">item three </a> </li>
</ul>

<div id="superNav">  div content is here </div>

这是当前的 jQuery:

$('li#locations a').hover(function(){
$('#locationsSuperNav').slideDown();
}); 
$('#locationsSuperNav').mouseleave(function(){
$(this).slideUp();
}); 

有没有办法使用 y 坐标来触发 mouseleave 事件？

预先感谢您的帮助。

Answer 1

只需为 mouseleave 创建一个函数，然后在您的 li 的 mouseleave 上以及其他事件上调用此函数即可。

实现此目的的一种方法是使用 http://api.jquery.com/event.pageY/ 。但这有点硬编码。

另一种方法是将您希望允许鼠标移动的区域(幻灯片保持触发的位置)放在透明 div 中，并在 mouseleave 事件中调用“mouseleave 函数”(来 self 帖子的第一段)这个透明 div 的。