こんにちはみんな私はhoverIntentを使用してサブメニューを表示し、ライトボックススタイルの「ライトアウト」暗い背景を表示するシンプルなドロップダウンメニューシステムをまとめました。
メニューは機能していますが、更新したいので、あるアイテムから次のアイテムに移動しても、暗い背景が消えて再び表示されるのではなく、元の位置に留まります。
私はjsFiddleを作成したので、私が話していることを確認できます：http: //jsfiddle.net/gGd6Y/10/
メニュー項目1にカーソルを合わせてから、項目2に移動してみてください。
HoverIntentの呼び出しの.mouseleave（）部分で、マウスカーソルが移動した要素を確認できるようにしたいのですが、それが別のメニュー項目である場合は、暗い背景がオフにならないようにします。
HTMLが現在設定されている方法では、それを行うことはできません。影は他のホバリング可能な要素を覆います。したがってmouseleave、他のLIではなく、シャドウにカーソルを合わせている場合。
私が提案した解決策：http：//jsfiddle.net/iambriansreed/k98LP/
メニューを影の上に表示させました。シャドウフェードアウトアクションを遅らせ、実際にフェードアウトする前に他のメニュー項目がホバーされていないことを確認しました。
これが役立つかどうかを確認してください：http：//jsfiddle.net/gGd6Y/11/
オーバーレイの上に表示されるようにメニュー項目を変更しました。
編集：
私の最後のコメントで提案された解決策：
簡単な解決策は、すべてのアイテムのコンテナにmouseleaveリスナーを追加することです。
is_element_hoveredより柔軟な解決策は、各要素のブール値を格納することです。mouseleaveイベントが発生した場合は、小さな遅延を設定し、その後、ブール値を確認して、背景アニメーションを適切に設定します。