need help with jQuery when not hovering over a particular element

I am having a navigation div (the id is navigation开发者_如何学编程) i am thinking of writing a code that executes when i am not hovering over the navigation. Can somebody explain me how can that be possible with jQuery.

<ul id='navigation'>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>

#navigation li{
 display:inline;
 float:left;   
    width:50px;
    border-right:1px solid black;
    padding:2px;
}

jQuery("#navigation").mouseout(function(){

   alert("hi"); 

});

Now with this code even when i am moving from one li to another mouseout function is called. However i am expecting it to be called everytime out of this navigation.

To do something when a user's mouse leaves and element, use the mouseout event:

$('#navigation').mouseout(function() {
  alert("You left me! :'(");
});

If you also want to do this when the page first loads you'll need to add it as a ready event as well.

Step 1: Create a boolean flag that equals true.

Step 2: Add a mouseover function to the naviagtion. That function should make the boolean flag equal false

Step 3: Add a mouseout function to the naviagtion. That function should make the boolean flag equal to false

Step 4: At the end of the page ready event add a while (true) { } loop, in that loop check the boolean with an if statement. Put whatever code you need in the if statement. Make sure you also have a delay at the end of the while loop.