0

私は次のシナリオを持っています...

span.share-thisにカーソルを合わせると、「 under 」というdivが表示されます。このビットは、私が望むように正確に機能します。ここで、マウスカーソルが「under」 divにあり、マウスアウトすると、「under」 divが消え、すべてが元の状態に戻るように設定しました(すべてがまだダンディです)。

私の問題は、span.share-thisにカーソルを合わせて、 「under」 divに移動せずに、ページの別の部分に移動しても、「under」 divが引き続き表示されることです。

span.share-thisからページの別の部分に移動すると、「under」 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/

4

2 に答える 2

2

良いスタートを切りました。マウスオーバーとマウスアウトをさらにいくつか追加する必要があります。ホバーを使用するのがおそらく最も簡単です。

$('#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つの要素がどれだけ離れているかに応じて、setTimeoutJavascriptclearTimeout関数を調べることもできます。スパンと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秒の遅延が発生します。

于 2010-01-17T04:52:13.233 に答える
0

...共有で.mouseout()を呼び出す必要があると思います-このdivを使用して、そこに隠したいものを非表示にします。または私は何かを逃した:-(

于 2010-01-17T04:42:57.320 に答える