jquery - Jqueryの重複効果の問題

Question

重なり合う要素に対する要素の効果を聴こうとしています。要素BにホバーしたときにのみitemBにホバー効果が必要です。ただし、要素Bは要素Aの上にあるため、要素Aへのホバー効果も表示されます。これを解決する方法はありますか？どうもありがとう。

私のjsfiddle

http://jsfiddle.net/pP7h3/

Answer 1

使用できます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() を暗黙的に呼び出すことによってバブリングを停止します。

Answer 2

これを試してください 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);

})