Jquery重叠效应问题

我试着听一个元素对重叠元素的影响。当我将鼠标悬停到元素B时，我只想在项目B上显示悬停效果。但是，由于元素B位于元素A的顶部，因此元素A上的悬停效果也会显示出来。有办法解决这个问题吗？非常感谢

我的朋友

---

您可以使用

event.stopPropagation（）

：

说明：防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

如果需要，您还有

stopImediatePropagation（）

：

说明：防止执行其余的处理程序，并防止事件在DOM树中冒泡

除了防止执行元素上的任何附加处理程序外，此方法还通过隐式调用event.stopPropagation（）来停止冒泡

试试这个

你想干什么就干什么。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);

})

---

谢谢但它只有在我首先悬停到div B时才起作用。如果我悬停到div A，那么div B.ItemA不会消失……（+1）

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

})