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

【问题标题】：Prevent child element hovering from breaking parent hover防止子元素悬停打破父悬停
【发布时间】：2015-02-27 18:44:08
【问题描述】：

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

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

这里的问题是，当子 img 悬停时，父“悬停状态”会中断。即使子元素悬停，如何使父元素保持悬停状态？

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

非常感谢！

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

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

【问题讨论】：

【解决方案1】：

您正在收听事件mouseenter/mouseout。

你想要mouseenter/mouseleave的事件：

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

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

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

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

只需使用:hover 伪类。

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

.parent:hover {
    background:red;
}

【讨论】：

【解决方案2】：

相当基本的解决方案，不确定您是否希望您的解决方案保持切换状态，但我会使用添加/删除类来攻击它。

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

【讨论】：