JQuery - Problema con mouseover

Question

Tengo el siguiente escenario ...

Cuando se ciernen sobre span.share-este , se dispara un div llamado ' en ' a salir a la luz. Este bit funciona exactamente de la forma que yo quiero. Ahora lo fijo así que después que el cursor del ratón está en el div 'en' y yo mouseOut, el 'en' div se va y todo ha vuelto la forma en que era (Todo sigue Dandy).

Mi problema es que cuando se ciernen sobre la span.share-este y no vaya a la div 'bajo', pero navegar fuera a otra parte de la página, el 'en' div es aún visible.

Me gustaría configurarlo de modo, que si navego desde span.share-este a otra parte de la página, el 'en' div cueros.

¿Alguien sabe cuál es la función que debería mirar?

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 prueba: http://www.eirestudio.net/share/

Answer 1

Tienes un buen comienzo. Sólo tiene que añadir y de un poco más de mouseover mouseout. El uso de la libración será probablemente el más 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');
});

En función de sus necesidades y lo lejos, espacialmente, en la página, los dos elementos son, también es posible que desee ver en setTimeout y clearTimeout funciones Javascript. Si el tramo y el div son lo suficientemente lejos en la que alguien podría arrastrar fuera de la span.share-this y no puede pasar el ratón sobre el div.under, se debe establecer un tiempo de espera que, después de un cierto número de milisegundos, ocultaría la div.under. Y luego, si son más de la div.under que le borre el tiempo de espera. Sólo con rapidez, puede parecerse a algo como esto:

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

Por supuesto, sin embargo, esto podría causar un retraso de medio segundo antes de que el div.under estaba oculto.

Answer 2

... me cree es necesario llamar a .mouseout () en el reparto de este div y ocultar lo que lo que quiere escondido allí. O me he perdido algo: - (