强制jquery mouseover不要在超过子节点时触发，只是父节点

我在里面有一个 ，当我将鼠标hover在上工作时，我想要发生一些事情，问题是如果我将光标移到内部的图像上，它会再次触发。

有没有办法强制它在超过时触发，而不是孩子（小于父）。

我的js：

 $('#logo a').mouseover(function() { $(this).addClass('active'); $('div#header-contact').fadeIn(); }); 

Answer 1

问题是鼠标hover事件气泡到祖先元素，因此您可以使用不起泡的mouseenter事件

尝试使用mouseenter事件

 $('#logo a').mouseenter(function() { $(this).addClass('active'); $('div#header-contact').fadeIn(); }); 

Answer 2

您需要停止向孩子们传播/冒泡事件

event.stoppropagation

 $('#logo a').mouseover(function(event) { $(this).addClass('active'); $('div#header-contact').fadeIn(); event.stopPropagation() }); 

或者您可以使用鼠标输入事件

 $('#logo a').mouseenter(function() { $(this).addClass('active'); $('div#header-contact').fadeIn(); }); 

Answer 3

 $('#logo a').mouseover(function() { $(this).addClass('active'); $('div#header-contact').fadeIn(); }); $('#logo a img').mouseover(function(event) { event.preventDefault(); }); 

Answer 4

停止对child的mouseover事件：

 $('#logo a').mouseover(function() { $(this).addClass('active'); $('div#header-contact').fadeIn(); }).children().mouseover(function() { return false; });