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);

})