Toggling a hidden div and then hiding on mouse out

Question

I have a site where the last item in the navigation, when you hover, will toggle a hidden div. I'm trying to create a "super nav" of sorts. The problem I'm having is getting the div to hide on mouse out. Here is a sample of the code I have.

<ul id="nav_14623">
    <li>
        <a href="/index.htm">Home</a>
    </li>
    <li class="locations">
        <a href="/locations.htm">Locations</a>  
    </li>
</ul>

When the user mouses over "Locations", I'd like the div "locationsSuperNav" to show.

<div id="locationsSuperNav" style="display: none;"> Location Content goes here
<div id="superNavLeft"></div>

Here is the jquery

$('li#locations a').hover(function () {
    $('#locationsSuperNav').toggle('medium');

The problem I am facing is getting the #locationsSuperNav to hide when the user mousesout of that space. The div is 475px wide by 140px high. This is the code I tried for the mouseout event. What is happening is the div toggles right away when the cursor enters the div.

$('#locationsSuperNav').mouseout(function () {
    $('#locationsSuperNav').hide();

Anyone have a suggestion on how to hide the div on mouseout?

Thanks.

Answer 1

"... is getting the #locationsSuperNav to hide when the user mousesout of that space ... ". This isn't clear: Which space is getting mousedout? The Locations link, or the #locationsSuperNav div?

The way you've got mouseover set now, it'll hide the SuperNav the moment you mouse into it. Do you want it to hide only when you mouseout of the SuperNav? Then change the .mouseover() to .mouseout().

If you want it to hide when you mouseout of the Locations link, then attach the mouseout event there.

Answer 2

use .hover() ... it takes two functions see http://api.jquery.com/hover/ one function for mousein the other for mouseout.