鼠标悬停子元素上，而不是母公司

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