1

私は一生、このホバーを遅らせる方法を理解できません。http://forum.smartcanucks.caをチェックアウト すると、ホバーされたパネルが表示されるときに上部にメニューがあります。

それらを表示させるCSSは

#navigation li:hover > .panel {
    display: block;
}

#navigation li にカーソルを合わせると、display:block; の前に .5 秒の遅延が発生するようにするための jQuery の代替手段を探しています。.panel に適用された後、li 要素または .panel のホバーを離れると、.panel が display:none; に戻るまでに .3 秒の遅延があります。

私は CSS オプションを試しましたが、それらを機能させることができませんでした。また、インターネット上で見つけた jQuery のさまざまなスニペットを実装しようとしましたが、役に立ちませんでした。

遅延の背後にある理由は、人々が誤ってマウスを li 要素の上に移動し、不要な .panel 表示が煩わしいためです。

助けていただければ幸いです。

これは、私が実装しようとした CSS オプションであり、動作させることができませんでした: http://jsfiddle.net/gryzzly/JWk7V/4/ (これは一例です - 私のものではありません)クロスブラウザです。

編集

OK、.panelボックスをCSSではなくjqueryのみで表示しようとしています

私はこれを試しています

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $("#navigation li").hover(function() {  
        $('#navigation li:hover > .panel').addClass("displayblock");    
    },     
    function() {    
        $('.panel').removeClass("displayblock");     
    });
});
</script>

そして、ここにクラス .displayblock{display:block;} があります

firebug を使用すると、displayblock クラスが panel 要素に追加されますが、パネルは表示されません。何が間違っているのかわかりません。

HoverIntent を使いたいのですが、その前に jQuery だけでパネルを表示したいです。

4

2 に答える 2

0

.panelがページ上の別の要素の後ろに表示されている可能性があります。CSSのz-indexプロパティでそれを修正してみてください。zインデックスを適用しようとする要素の「位置」を定義することを忘れないでください。

また、CSS3トランジションは遅延を完全にサポートしており、JSを1行も使用せずにこの種のドロップダウンを作成するために使用できます。

于 2012-04-05T13:22:35.427 に答える
0

jQuery hoverintent プラグインを使用することをお勧めします - http://cherne.net/brian/resources/jquery.hoverIntent.html

CSS のみの解決策はないため、CSS を使用して .panel を表示できるようにクラスを適用し、jQuery でそのクラスを削除し、ホバー イベントを使用して同じ効果を適用することをお勧めします。

于 2012-04-04T00:35:02.097 に答える