我有一个作为主导航的 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 事件?
预先感谢您的帮助。
最佳答案
只需为 mouseleave 创建一个函数,然后在您的 li 的 mouseleave 上以及其他事件上调用此函数即可。
实现此目的的一种方法是使用 http://api.jquery.com/event.pageY/ 。但这有点硬编码。
另一种方法是将您希望允许鼠标移动的区域(幻灯片保持触发的位置)放在透明 div 中,并在 mouseleave 事件中调用“mouseleave 函数”(来 self 帖子的第一段)这个透明 div 的。
关于jquery - 仅当鼠标沿垂直方向移动时才触发 mouseleave 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3686217/