力jQuery的鼠標懸停不觸發時過孩子，只是父母

Question

我有一個<img>內的<a>，和我想要的東西懸停在其運作<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

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


$('#logo a img').mouseover(function(event) { 
    event.preventDefault(); 
}); 

Answer 3

您需要停止事件的傳播/冒泡到t他的孩子

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 4

兒童停止鼠標懸停事件：

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