jquery - CSS 縦型メニューをドロップダウン メニューに変換 - 一度ドロップすると離れられない

Question

ドロップダウンに変換したい垂直CSSメニューがあります。マウスオーバー用のJavaScriptをいくつか追加してドロップダウンさせましたが、マウスアウトで消すことができません。

http://jsfiddle.net/hCVjK/4/

Answer 1

特に、すぐに隠れるのではなくフェードアウトする場合は、解決が難しい問題です。マウスが何の上に乗っているかを追跡し、あるタグから別のタグに移動すると同時に mouseenter および mouseleave イベントが完全に発生しないという事実を考慮する必要があります。

これを試してみてください： http://jsfiddle.net/cgagliardi/NPVVQ/

HTML では、カテゴリにあった onMouseOver コードを削除し、JS に移動しました。

CSSで、私は変更しました

#navigation { ... visibility: hidden }

に

#navigation { ... display: none }

それ以外は、すべての変更は JavaScript にあります。メイン メニューがフェードアウトするまでの時間を遅らせたい場合は、setTimeout 呼び出しの値を 100 に変更します。