鼠標懸停子元素上，而不是母公司

Question

我採取的一大亮點功能，這凸顯了當前盤旋的div和我有HTML結構是這樣的：

<div> <!-- this is the parent --> 
    <div> content ... </div><!-- a child --> 
    <div> content ... </div><!-- another child--> 
</div> 

應該如何工作的： - 如果我將鼠標懸停在父項上，則應突出顯示父元素。 - 如果我將鼠標懸停在一個子元素，父元素的高亮應該褪色，它應該只突出的子元素

我使用的是jquerys'的mouseenter和mouseleaves事件，代碼如下所示 （實際上其有點不同，因爲IM使用GWT和本地JavaScript界面​​的工作，但它的工作方式相同）：

$(element).mouseenter(function(event) 
{ 
    showHighlightContainer(); 
}); 

$(element).mouseleave(function(event) 
{ 
    hideHighlightContainer(); 
}); 

的問題是：當我將鼠標懸停在父元素，該元素beeing強調，一切都很好。 但是當我將鼠標懸停在子元素上時，子元素和父元素將突出顯示。

我使用錯誤的鼠標事件嗎？我怎麼解決這個問題？

Answer 1

您需要使用鼠標懸停及移出

$(element).mouseover(function (event) { 
    event.stopPropagation(); 
    showHighlightContainer(); 
}).mouseout(function (event) { 
    event.stopPropagation(); 
    hideHighlightContainer(); 
}); 

演示：Fiddle