私は一生、このホバーを遅らせる方法を理解できません。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 だけでパネルを表示したいです。