0

ネストされたdiv、ulなどがたくさんあります。構造はここに示されています。

<script>
$(document).ready(function() {
    $('#top-level').mouseover( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    });
    $('#top-level').mouseout( function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });
</script>

<div id="top-level">
    <div>
        <div class="action" style="display:none;">
            <ul class="drop" style="display:none;">
                <li>Text Here</li>
                <li>Text Here</li>
                <li>Text Here</li>
            </ul>       
        </div>
    </div>
</div>

ここに表示されているulは、ロールオーバーで表示されています。.drop cssはposition：absoluteとして設定されているため、トップレベルのdivの上に表示されます。

したがって、ulドロップは見栄えがしますが、マウスカーソルに接触するとすぐに狂ってしまいます（止まることなく上下にブラインドします）。これは、何らかの方法でフォーカスを失うことに対するマウスと関係があります。

この種の効果が適切に機能するためには、どのように対処すればよいですか？divをスクロールして、表示された後にドロップulからオプションを選択できるようにしたい。

前もって感謝します。

4

4 に答える 4

2

http://jsfiddle.net/PDdKL/

代わりにホバーを使用してください。

$(document).ready(function() {
    $('#top-level').hover( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    }, function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });
});
于 2011-04-21T20:43:16.650 に答える
2

mouseenterとmouseleaveを使用します。

    $('#top-level').mouseenter( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    });
    $('#top-level').mouseleave( function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });
于 2011-04-21T20:51:57.273 に答える
0

私は誰かがここでそれをチェックするためにこのようなものを作りました。

http://jsfiddle.net/RyanAdriano/AWm66/8/

于 2011-04-21T20:47:58.667 に答える
0

$(element).stop();すべてのイベントハンドラーの先頭で使用して、その要素のアニメーションを停止できます。

于 2011-04-21T20:44:52.537 に答える