JQuery - проблема с наведением мыши

Question

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

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

Моя проблема заключается в том, что, когда я наведите курсор мыши на span.share-this и не перейдите к 'в разделе' div, а перейдите к другой части страницы, 'под' div все еще виден.

Я хотел бы установить его так, чтобы при переходе от span.share-this к другой части страницы, 'в разделе' 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

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

$('#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. Если span и 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 () на ресурсе share-this и скрыть то, что вы хотите там спрятать. Или я что-то пропустил: - (