Firing the mouseleave event only when the mouse moves in a vertical direction

Question

I have a ul which functions as the main navigation. I have one li inside that ul which, when hovered on, slides down a hidden div with a bunch of information. This div appears right below the main nav. I would like to have the div hide itself if the user moves their mouse vertically, outside the main nav. I need it to stay if they mover their mouse over the div so they can click links located there.

Here's some of the code:

<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>

Here is the current jQuery:

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

Is there any way to use a y coordinate to also trigger the mouseleave event?

Thanks in advance for any help.

Answer 1

Just make a function for mouseleave and call this function on mouseleave of your li and also for other events.

One way to do the trick is to use http://api.jquery.com/event.pageY/ . But this is a little harcoded.

Another way is to put the area where you want your mouse to be allowed (where the slide to remain triggered) in a transparent div and call the "mouseleave function"(from the first paragraph of my post) in the mouseleave event of this transparent 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();
    }
  });
});

Here's a demo to above code http://jsbin.com/axane3