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

Question

假设我有一个包含img子元素的父div元素，当鼠标悬停在父元素上时，我想执行一些代码。

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

问题在于当鼠标悬停在子元素img上时，父元素的“悬停状态”会中断。我该如何使得即使子元素被悬停，父元素仍然保持其悬停状态？

这里有一个jsfiddle示例，请尝试在空白处悬停，然后在图像上悬停http://jsfiddle.net/omrf0dxe/ 非常感谢！

编辑：img子元素只是一个示例，它也可能是其他类型的元素，比如divs、links等。

编辑2：好吧，显然解决方法是在绑定“退出”事件时使用mouseleave而不是mouseout。

- Systemfreak

Answer 1

您正在监听事件mouseenter/mouseout。

您希望监听事件mouseenter/mouseleave：

示例在这里

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

作为另一种选择，您还可以在子元素 img 中添加 pointer-events: none 以实质上从元素中删除鼠标事件：

更新示例

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

---

根据您的需求，您甚至可能不需要使用JS。

只需要使用:hover伪类即可。

这里有一个示例

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

.parent:hover {
    background:red;
}

- Josh Crozier

---

问题是我并不总是知道子元素是一个图像，还是多个元素，比如div、图像等等。 是否有一种通用的方法来解决这个问题，而不是针对特定的子元素类型？ - Systemfreak

解决方案相当简单，我只需要使用mouseleave而不是mouseout。然而，我并不知道指针事件的用法，所以非常感谢你的帮助和指导 :) - Systemfreak

Answer 2

这是一个相当基础的解决方案，如果您希望保持切换状态，可以使用添加/删除类的方式来实现。

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

http://jsfiddle.net/omrf0dxe/7/

- knocked loose

---

这很奇怪，为什么这个能用而我的不能用，后来我发现我使用的是mouseout而不是mouseleave，这就是错误所在。谢谢！ - Systemfreak

没问题，伙计。我刚刚测试了你的鼠标离开理论，它也有效，所以现在你有两个解决方案 :) - knocked loose