title: JQuery on hover out get the element the mouse has moved into
body: <p>I have a navigation system that has a single level drop down on some of the elements. I have got it working just the way I want, except that it's too easy to just fall out the bottom of the nav when mousing along it (it's a second full width line drop down with inline items). </p>
  
  <p>What I need is a way to stop the nav from dissapearing when you fall out the bottom, without interfering with the other navigation items (so that these still instantly hide the nav when you hover over them).</p>
  
  <p>Is there a way to find the element that you're mousing into when the hover out event is called? This way I could detect if they were mousing over the body and start a timer to hide the nav in a 1000ms or something.</p>
  
  <p>I have tried hoverIntent but this doesn't work for what I need, as I can't afford a delay on moving from one nav item to the other... it makes the nav very difficult to use!</p>
  
  <p>Either that or is there a way to detect if they have simply fallen out the bottom of the nav using mouse position?</p>
  
  <p>Any help would be very appreciated. The Jquery for the current nav is below.</p>
  
  <pre><code>var navDisplayTimer;
  var navDisplayObject;
  $("#main-nav &gt; li").addClass("js-enabled");
  $("#main-nav &gt; li").hover(function(){
   $(this).addClass("hovered");
   if ($(this).find("ul").length != 0) {
    $(this).parent().stop().animate({borderWidth: "22px"}, 400);
    if($(this).parent().css("borderWidth") == "22px 22px 22px 22px") {
     $(this).find("ul").show();
    } else {
     navDisplayObject = this;
     navDisplayTimer = setTimeout(function() {
      $(navDisplayObject).find("ul").show();
     }, 300);
    }
   }
  },function(){
   clearTimeout(navDisplayTimer);
   $(this).find("ul").hide();
   $(this).parent().stop().animate({borderWidth: "2px"}, 400);
   $(this).removeClass("hovered");
  });
  </code></pre>