2011-01-18 15 views
0

私はここに、この例があります:http://jsfiddle.net/QRChv/メニュー親子ホバー - アニメーションを停止 - jqueryの

イムあなたは子リストの項目にカーソルを合わせると、そのアニメーションが開始されますようにそれを設定しようとしているが、親のdoesntその.hover()関数を呼び出します。

これを行うことができるかどうかわかりませんが、親が実際にそのアニメーションを通過するのを止める手段があります。だから、実際には、子リスト項目が上に乗っているときは何もしません。

私はリスト項目ごとにif文をセットアップして、それを簡単に保つようにしました。

+0

$(この).parent()アンバインド( 'のMouseEnter mouseleave'); iveはそれを追加しようとしましたが、運はありません。 http://jsfiddle.net/QRChv/5/ –

+0

ありがとう@jAndyと@rcravens。私がコメントした最後の問題はCSSを介して修正可能でした。 http://jsfiddle.net/QRChv/17/ 誰かが同様のナビゲーションを持っていても、要素が互いに隣り合っていた場合は、問題が発生します。 –

答えて

1

私はあなたのコードを更新しました:

http://jsfiddle.net/QRChv/4/

あなたはすなわちハンドラからfalseを返すことで、イベントの伝播を停止する必要があります。

またのstopPropagationの呼び出しを追加する方法についてevent object

+0

ありがとう、私は、最初のリスト項目をホバーし、次に2番目のリスト項目を上にすると、最初の項目が元の色にアニメートされないことに気付きました。 イベントの伝播については、 –

+1

が何であるかわからないので、これを読む必要があります。@ NilsR:そうです。簡単に言えば、すべてのイベントはDOMツリーで「バブルアップ」します。ネストされた要素で起こっている 'mouseover'イベントは、あなたが明示的にそれを取り消さない限り、すべての親ノードにバブルアップします。これはワット '.stopPropagation'です。 – jAndy

1

何に.stopPropagation()自分自身を呼び出すことができます。このような何か:。

http://jsfiddle.net/rcravens/QRChv/9/

+0

これは大部分のために働いてくれてありがとう。 :]しかし、最初の要素の上にマウスを置くと2番目の要素にまっすぐに戻ると、最初の要素は元に戻ることはありません。 –

関連する問題