Hiding a div when the mouse is at some distance from this div

Question

I have a div on the page that is being dragged by an element in the navigation bar. I would like this div to hide when the user mouse gets a certain distance from the outer border of the div.

Here is a sample code:

<ul> <li>This is link A</li> <li>This is link C</li> <li id="trigger">This is link D</li> </ul> <div id="megaMenu">This is where the menu content goes</div> 

So, when the user moves the cursor to the lithium switch, the mega-menu will move down. What I would like to do is promote #megaMenu when the user mouse is 50 pixels outside the div. Any suggestions ??

Here is the jQuery core that I used:

 $(document).ready(function () { $('li#locations a').hover(function () { $('#locationsSuperNav').slideDown(); }); $('.superNavClose').hover(function () { $('#locationsSuperNav').slideUp('fast').removeClass("open"); }); }); 

The second part of the code (.superNavClose) was an attempt to put a hot spot around the menu to close it when the user mouse got into it. There are many links inside the mega menu, so I need to keep it open while the user is working with it. I thought closing a div when the mouse is at some distance would work just fine. Thanks in advance for any suggestions!

Answer 1

You can use handlerOut callback from the hang function

 $(document).ready(function(){ $('li#locations a').hover(function(){ $('#locationsSuperNav').slideDown(); }, function(){ $('#locationsSuperNav').slideUp('fast').removeClass("open"); }); });