JQuery - Problema com MouseOver

Question

Eu tenho o seguinte cenário ...

Quando eu pairei span.share-isso, isso desencadeia uma div chamada 'debaixo'Para vir à vista. Este bit funciona exatamente da maneira que eu quero. Agora eu o defina, quando o cursor do mouse está no 'debaixo' div e eu mouseout, o 'debaixo' Div vai embora e tudo está de volta do jeito que estava (tudo ainda é dândi).

Meu problema é que, quando pairei sobre o span.share-isso e não navegue para o 'debaixo' div, mas navegue para outra parte da página, o 'debaixo' Div ainda é visível.

Eu gostaria de defini -lo, se eu navegar de span.share-isso Para outra parte da página, o 'debaixo' Div se esconde.

Alguém sabe para que função devo olhar?

Código 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');
});

Código HTML

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

URL de teste: http://www.eirestudio.net/share/

Answer 1

Você tem um bom começo. Você só precisa adicionar mais alguns MouseOver's e MouseOut. Usar o Hover provavelmente será o mais fácil.

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

Dependendo das suas necessidades e de quão longe, espaço, na página, os dois elementos estão, você também pode querer investigar setTimeout e clearTimeout Funções JavaScript. Se o período e a div estiverem longe o suficiente onde alguém poderia se arrastar para fora do span.share-this e não estar mouse sobre o div.under, você definiria um tempo limite que, após um certo número de milissegundos, ocultaria o div.under. E então se eles estão acima do div.under Você limparia o tempo limite. Apenas rapidamente, pode parecer algo assim:

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

Claro, porém, isso causaria um atraso de meio segundo antes do div.under Estava escondido.

Answer 2

... Eu acho que você precisa ligar para .mouseout () na divisão-essa div e esconder o que você quer esconder lá. Ou eu perdi alguma coisa :-(