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

Question

所以，让我们说我有一个父div元素，它有一个img子元素，我希望在父元素悬停时执行一些代码。

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

这里的问题是当孩子img徘徊时，父母＆＃34;悬停状态＆＃34;休息。我怎样才能使父母保持其悬停状态，即使其子元素悬停？

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

非常感谢！

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

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

Answer 1

您正在收听活动mouseenter / mouseout。

您想要活动mouseenter / mouseleave：

Example Here

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

---

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

Updated Example

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

---

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

只需使用:hover伪类。

Example Here

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

.parent:hover {
    background:red;
}

Answer 2

非常基本的解决方案，不确定您是否希望自己保持切换，但我会使用添加/删除类攻击它。

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

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