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

StackOverflow https://stackoverflow.com/questions/2079944

  •  21-09-2019
  •  | 
  •  

Вопрос

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

Когда я навожу курсор span.share-это, он запускает div под названием 'под', чтобы попасть в поле зрения.Этот бит работает именно так, как я хочу.Теперь я настроил так, что когда курсор мыши находится на 'под' div и я наводим курсор мыши, 'под' 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/

Это было полезно?

Решение

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

$('#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 был скрыт.

Другие советы

...Я думаю, вам нужно вызвать .mouseout() в разделе «share-this» и скрыть там то, что вы хотите скрыть.Или я что-то пропустил :-(

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top