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

Prevent child element hovering from breaking parent hover

本文关键字：悬停 元素      更新时间：2024-07-03

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

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

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

这里有一个例子jsfiddle，试着在空白处悬停，然后在图像上http://jsfiddle.net/omrf0dxe/

非常感谢！

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

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

您正在侦听事件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;
}

非常基本的解决方案，不确定您是否希望自己的解决方案保持切换状态，但我会用add/remove类来攻击它。

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

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

相关文章：