JQuery - マウスオーバーの問題

Question

次のシナリオがあります...

マウスオーバーすると スパン.シェア-これ, 、という div をトリガーします。下』が見えてくる。この部分は私が望むように正確に機能します。ここで、マウスカーソルが '下' div と私はマウスアウトします。 '下' div が消え、すべてが元の状態に戻ります (すべてがまだ正常です)。

私の問題は、上にマウスを置くと、 スパン.シェア-これ に移動しないでください。 '下' div ですが、ページの別の部分に移動します。 '下' divはまだ表示されています。

からナビゲートするように設定したいと思います。 スパン.シェア-これ ページの別の部分に移動すると、 '下' 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

あなたは良いスタートを持っています。あなたはわずか数より多くのマウスオーバーのとマウスアウトのを追加する必要があります。ホバーを使用すると、おそらく最も簡単になります。

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

あなたのニーズに、どのように遠くによっては、空間的に、ページ上で、2つの要素があり、あなたも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が隠されていた前に、これは0.5秒の遅延が発生します。

Answer 2

...私はあなたがそこに隠されて何をしたいものを共有し、このdiv要素と非表示に）（.mouseout呼び出す必要があります考えています。それとも私が何かを逃した： - （