JQuery - Проблема с наведении курсора

Question

У меня есть следующий сценарий ...

Когда я парить над span.share- этого, он запускает DIV под названием «под» прийти в поле зрения. Этот бит работает точно так, как я хочу. Теперь я установил его так, что, когда курсор мыши находится на 'под' div и I mouseout, 'под' div уходит, и все возвращается так, как было (все еще денди).

Моя проблема заключается в том, что, когда я парить над span.share- этого и не перейти к «под» DIV, но уйдет в другую часть страницы, в «под» DIV все еще видно.

Я хотел бы установить его так, что если я перейти от span.share-это в другую часть страницы, в «под» Div шкур.

Кто-нибудь знает, на какую функцию я должен смотреть?

JQuery код

$('#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 код

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

Тестирование URL: http://www.eirestudio.net/share/

Answer 1

У вас есть хороший старт. Вам просто нужно добавить еще несколько Mouseover-х и MouseOut лет. Использование парить, вероятно, будет самым простым.

$('#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'); 
}); 

В зависимости от ваших потребностей и как далеко, на расстоянии, на странице, два элемента, вы также можете посмотреть в setTimeout и clearTimeout Функции Javascript. Если диапазон и div находятся достаточно далеко, где кто-то может перетащить span.share-this и не будет мы выберем div.under, вы установите тайм-аут, который после определенного количества миллисекунд скроет div.under. И тогда, если они превысят div.under вы очистите тайм-аут. Только быстро, это может походить на что-то вроде этого:

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); 
}); 

Конечно, хотя, это вызвало бы полсекунды задержку перед div.under был скрыт.

Answer 2

... мне думает, что нужно вызвать .mouseout() на акцию -это div и спрячьте то, что вы хотите спрятать там. Или я что-то пропустил :-(