Question

我正在尝试听取重叠元素的元素效果。当我悬停到元素B时，我只想要对项目B的悬停效果。但是，由于元素B位于元素A的顶部，因此元素A上的悬停效果也会显示出来。反正有没有解决这个问题？非常感谢。

我的jsfiddle

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＆amp;中有许多元素时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);

})

Jquery重叠效应问题

2 个答案: