如何防止将鼠标悬停在子元素上时触发父元素的悬停效果？-css教程-PHP中文网

如何防止将鼠标悬停在子元素上时触发父元素的悬停效果？

Susan Sarandon

发布： 2024-11-03 04:05:31

原创

279 人浏览过

How to Prevent a Parent Element's Hover Effect from Triggering When Hovering Over a Child Element?

父元素和子元素的悬停效果

解决当光标移动到嵌套子元素上时禁用父元素悬停效果的挑战元素，我们考虑以下解决方案：

CSS :has 选择器（2024 年引入）

通过引入 CSS :has 选择器，您可以直接对元素进行样式化父元素基于其子元素的悬停状态。例如：

.parent:has(.child:hover) {
    background: normal;
}

登录后复制

这段代码确保当光标悬停在类为“child”的子元素上时，类为“parent”的父元素的背景颜色返回到其原始状态。

兄弟元素技巧

在 :has 选择器之前，解决方法是使用兄弟元素：

<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

登录后复制

兄弟元素是使用绝对定位来重叠子元素进行定位。当您将鼠标悬停在子元素上时，同级元素的悬停效果将被激活，从而覆盖父元素的悬停效果。

.child:hover ~ .sibling {
    background: #FFF; // Override parent's background color
}

登录后复制

限制

请注意，这些解决方案依赖于嵌套元素的结构，可能不适用于所有情况。

以上是如何防止将鼠标悬停在子元素上时触发父元素的悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！