Question

I have the following scenario…

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/

Answer 1

You’ve got a good start. You just need to add a few more mouseover’s and mouseout’s. Using hover will probably be the easiest.

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

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

Depending on your needs and how far away, spacially, on the page, the two elements are, you may also want to look into setTimeout and clearTimeout Javascript functions. If the span and the div are far enough away where someone could drag off of the span.share-this and not be mousing over the div.under, you would set a timeout which, after a certain number of milliseconds, would hide the div.under. And then if they are over the div.under you’d clear the timeout. Just quickly, it may resemble something like this:

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

var under;
$('#slider span.share-this').hover(function()
{   
    clearTimeout(under);
    $(this).parents('li').children('div.under').css('bottom', '12px');
}, function(){
    under = setTimeout(hideUnder, .5*1000);
});

$('#slider div.under').hover(function()
{
    clearTimeout(under);
    $(this).css('bottom', '12px');
},function()
{
    under = setTimeout(hideUnder, .5*1000);
});

Of course, though, this would cause a half-second delay before the div.under was hidden.