When I hover over span.share-this, it triggers a div called 'under' to come into view. This bit works exactly the way I want. Now I set it so, that when the mouse cursor is on the 'under' div and I mouseout, the 'under' div goes away and everything is back the way it was (Everything is still dandy).

My problem is that when I hover over the span.share-this and do not navigate to the 'under' div, but navigate away to another part of the page, the 'under' div is still visible.

I would like to set it so, that if I navigate from span.share-this to another part of the page, the 'under' div hides.

Does anybody know what function I should look at?

JQuery Code

$('#slider span.share-this').mouseover(function()
{   
    $
(this).parents('li').children('div.under').css('bottom', '12px');
});

$

('#slider div.under').mouseout(function()
{
    $
(this).css('bottom', '52px');
});

HTML Code

<li>
    
<div class="item">
        
<span class="share-this">Share This</span>
    
</div>
    
<div class="under">
        Under
    

</div>
</li>

Testing url: http://www.eirestudio.net/share/