2012-04-22 6 views
0

こんにちは、hoverIntentを使ってサブメニューを表示し、ライトボックスのスタイルを「暗い背景」として表示するシンプルなドロップダウンメニューシステムをまとめました。jQuery .mouseleave()の動作を、カーソルが*に移動する要素に基づいて変更する方法は?*?

私はメニューを使用していますが、アイテムを移動すると暗い背景が消えて再表示されるのではなく、その場所にとどまります。あなたは私が話しているかを見ることができるように

私はjsFiddleを作成しました: http://jsfiddle.net/gGd6Y/10/

は、その項目に移動するメニュー項目1の上にマウスを移動してください。2.

私が見ることができるようにしたいと思いますマウスカーソルがHoverIntentへの呼び出しの.mouseleave()部分に移動した要素。それが別のメニュー項目であれば、暗い背景がオフにならないようにします。

答えて

1

HTMLが現在セットアップされているため、実行できません。影は他のホバリング可能な要素をカバーします。あなたがmouseleaveのとき、あなたは他のLIではなく影の上を浮遊しています。

私の提案された解決策:http://jsfiddle.net/iambriansreed/k98LP/

私はメニューが影の上に表示されました。シャドウフェードアウトを遅らせて、実際にフェードアウトする前に他のメニュー項目がホバリングされていないことを確認しました。

+2

これが主な問題です。シャドーが表示されている間は他のメニュー項目にはマウスが表示されていないので、その上にマウスイベントが表示されているためシャドウが表示されます。 – jfriend00

+0

@ jfriend00 Tru dat。 – iambriansreed

+0

素晴らしい、多くのおかげでiambriansreed! –

0

単純な解決策は、すべてのアイテムのコンテナにマウスリーブリスナーを追加することです。

さらに柔軟なソリューションは、各要素にブール値is_element_hoveredを格納することです。 mouseleaveイベントが発生した場合、小さな遅延を設定し、その遅延の後にブール値をチェックし、背景アニメーションを適切に設定します。この場合に役立ちます

+0

私は "ゼロ"しました。これは少しでもうまくいけば使用できますが、簡単なことのためにはあまりにも多くの努力が必要です。 – rcdmk

+0

問題は、影の背景がナビゲーションバーの上にあるため、影が表示されているときにナビゲーションバーにマウスがないことです。これが修正されるまでこれを修正することはできません。 – jfriend00

1

参照:http://jsfiddle.net/gGd6Y/11/

私は、オーバーレイの上に滞在するためのメニュー項目を変更しました。

編集:私の最後のコメントで提案されている

ソリューション:

http://jsfiddle.net/gGd6Y/16/

+0

+1シャドウフェードアウトアクションをメニューにどのようにアタッチしたのが好きです。今盗む – iambriansreed

+0

別の良い答え、ありがとう。消されたメニュー項目は、もはや設計に必要な影によって覆われなくなりました。私はそれらにいくつかの背景を追加することによって同様の効果を達成できるかどうかを見ていきます。 –

+0

代わりに、各メニュー項目に「ミニオーバーレイ」を追加すると、オーバーレイを表示してメニュー項目にマウスキャプチャを保持するときに表示できるようになります。 – rcdmk

関連する問題