重なり合う要素に対する要素の効果を聴こうとしています。要素BにホバーしたときにのみitemBにホバー効果が必要です。ただし、要素Bは要素Aの上にあるため、要素Aへのホバー効果も表示されます。これを解決する方法はありますか?どうもありがとう。
私のjsfiddle
重なり合う要素に対する要素の効果を聴こうとしています。要素BにホバーしたときにのみitemBにホバー効果が必要です。ただし、要素Bは要素Aの上にあるため、要素Aへのホバー効果も表示されます。これを解決する方法はありますか?どうもありがとう。
私のjsfiddle
使用できますevent.stopPropagation()
:http://jsfiddle.net/rcdmk/pP7h3/1/
$('#b').hover(function(e){
$('#itemB').css('display','block');
e.stopPropagation(); // e is the event passed by jQuery to the function
},function(){
$('#itemB').css('display','none');
})
http://api.jquery.com/event.stopPropagation/
説明:イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにします。
必要に応じて、次のものもありますstopImediatePropagation()
。
http://api.jquery.com/event.stopImmediatePropagation/
説明:残りのハンドラーが実行されないようにし、イベントが DOM ツリーをバブリングしないようにします。
このメソッドは、要素に対する追加のハンドラーが実行されないようにするだけでなく、event.stopPropagation() を暗黙的に呼び出すことによってバブリングを停止します。
これを試してください http://codebins.com/bin/4ldqp8d/2
あなたが望むものとまったく同じように働きます。jQuery には、一度だけ発生する mouseleave および mouseout イベントがあります。
ホバーも使用できますが、A & B に多くの要素がある場合、ある要素から別の要素にマウスの位置を変更するたびにホバーが起動します。マウスが B の外に移動しない限り、これを起動する必要はありません。
$(document).ready(function() {
var overA = function(){
$('#itemA').css('display','block');
};
var outOfA = function(){
$('#itemA').css('display','none');
};
var overB = function(e){
outOfA();
$('#itemB').css('display','block');
e.stopPropagation();
};
var outOfB = function(){
overA();
$('#itemB').css('display','none');
}
$('#a').mouseenter(overA).mouseleave(outOfA);
$('#b').mouseenter(overB).mouseleave(outOfB);
})