javascript - 鼠标悬停在子元素上，而不是父元素上

Question

我正在实现一个突出显示功能，它突出显示当前悬停的 div，并且我的 html 结构如下所示:

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

它应该如何工作: - 如果我将鼠标悬停在父元素上，那么它应该突出显示父元素。 - 如果我将鼠标悬停在子元素上，父元素的突出显示应该消失，并且只突出显示子元素

我正在使用 jquerys 的 mouseenter 和 mouseleaves 事件，代码如下所示(实际上它有点不同，因为我使用 gwt 和 native javascript 接口(interface)，但它的工作方式相同):

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

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

问题是:当我将鼠标悬停在父元素上时，该元素会突出显示，一切都很好。但是当我将鼠标悬停在子元素上时，子元素和父元素都会突出显示。

我使用了错误的鼠标事件吗？我该如何解决这个问题？

Answer 1

您需要使用 mouseover 和 mouseout

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

演示:Fiddle