Question

我的<a>里面有一个<img>，当我将鼠标悬停在<a>上方时，我想要发生一些事情，问题是如果我将光标移到图像上在里面，它再次触发。

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

我的js：

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

Answer 1

问题是祖先元素的mouseover事件气泡，所以你可以使用不会起泡的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

停止对子项的鼠标悬停事件：

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

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

4 个答案: