Question

我有一个ul作为主导航功能。我有一个里面的ul，当它盘旋时，滑下一个隐藏的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创建一个函数，并在你的lile的mouseleave上调用这个函数，也可以用于其他事件。

实现这一诀窍的一种方法是使用http://api.jquery.com/event.pageY/。但这有点蠢蠢欲动。

另一种方法是将允许鼠标的区域（滑动保持触发的位置）放在透明div中并在mouseleave事件中调用“mouseleave function”（来自我帖子的第一段）这个透明的div。

Answer 2

var y = 0;
$(document).ready(function() {
  $('#locations a').hover(function(e){  
    y = e.pageY;
    $('#superNav').slideUp();
  },function(e){
    if(Math.abs(e.pageY - y) > 0)  {
      $('#superNav').slideDown();
    }
  });
});

以上是代码 http://jsbin.com/axane3

的演示

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

2 个答案: