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

Question

我正在实现一个高亮功能，它可以高亮当前悬停的div，我的html结构大致如下：

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

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

我正在使用jquery的mouseenter和mouseleave事件来实现这一点，代码看起来像这样（实际上它有些不同，因为我正在使用gwt和本地javascript接口，但它的工作方式相同）：

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

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

问题是：当我悬停在父元素上时，该元素被突出显示，一切正常。但是当我悬停在子元素上时，子元素和父元素都被突出显示。 我使用了错误的鼠标事件吗？我应该如何解决这个问题？

- rookian

---

尝试在你的函数中使用 this。 - Jai

Answer 1

您需要使用mouseover和mouseout。

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

演示： Fiddle

- Arun P Johny

---

event.stopPropagation() 是让我烦恼的问题，谢谢！ - Dellirium