防止子元素悬停打破父悬停

Question

假设我有一个父 div 元素，它有一个 img 子元素，我想在悬停父元素时执行一些代码。

<div class="parent">
    <img src="link_to_some_image" />
</div>

这里的问题是当子 img 悬停时，父 "hover state" 中断。我怎样才能让父元素保持悬停状态，即使它的子元素悬停了？

这是一个 jsfiddle 示例，尝试将鼠标悬停在空 space 上，然后悬停在图像上 http://jsfiddle.net/omrf0dxe/

非常感谢！

编辑：img children 是一个例子，它可能是其他类型的元素，如 divs、链接等

Edit2：好的，显然解决方案是在绑定 "exit" 事件时使用 mouseleave 而不是 mouseout。

Answer 1

您正在收听活动 mouseenter/mouseout。

您想要活动 mouseenter/mouseleave:

$(".parent").on("mouseenter mouseleave", function () {
   $(this).toggleClass('hovered'); 
});

作为替代方案，您还可以将 pointer-events: none 添加到子 img 元素，以便从根本上从元素中删除鼠标事件：

.parent > img {
    pointer-events: none;
}

不过，根据您要实现的目标，您甚至可能不需要 JS。

只需使用 :hover 伪 class.

.parent {
    width:400px;
    height:400px;
    background:blue;
}

.parent:hover {
    background:red;
}

Answer 2

非常基本的解决方案，不确定您是否希望您的解决方案保持切换状态，但我会用 add/remove class.

来攻击它

$('.parent').hover(
       function(){ $(this).addClass('hovered') },
       function(){ $(this).removeClass('hovered') }
)

Prevent child element hovering from breaking parent hover