Question

我正在实现一个突出显示功能，突出显示当前悬停的div，我有这样的html结构：

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

它应该如何工作： - 如果我将鼠标悬停在父级上，则应突出显示父元素。 - 如果我将鼠标悬停在子元素上，则父元素的突出显示应该淡出，并且应该只突出显示子元素

我正在使用jquerys的mouseenter和mouseleaves事件，代码看起来像这样（实际上它有点不同，因为我正在使用gwt和原生的javascript界面，但它的工作方式相同）：

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

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

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

我正在使用错误的鼠标事件吗？我怎么能解决这个问题？

Answer 1

您需要使用鼠标悬停和鼠标移动

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

演示：Fiddle

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

1 个答案: