CSS悬停在div上，但如果悬停在他的孩子身上则不会

Question

我查看了是否已经回答了这个问题，但找不到任何东西，只有关于我正在寻找的反向 css 规则的问题。

我有一个包含一个或多个孩子的 div，我希望它在悬停时更改其背景，但如果悬停其中一个孩子则不会；我需要将 :hover 规则限制为纯元素，而不是它包含的后代。不是 CSS 中的父规则，并且每当鼠标经过父项及其子项时都会触发 :hover，我发现自己没有想法，也许仅使用 CSS 无法实现此结果。但是，问题是关于 CSS 的，所以不需要 JS 或 JQuery 解决方案（我可以自己提供）

代码：

HTML

     <div class="parent">Text of the parent
        <p class="class1">I do not need to trigger parent's background color change!</p>
    </div>

CSS

     .parent {
       background: #ffffff;
    }
    .parent:hover {
       background: #aaaaff;
    }
    .class1 {
       margin: 10px;
    }

原文由 Nillus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用我们拥有的 CSS 选择器目前无法在子项悬停时停止元素的悬停效果， 这与我们在没有 javascript 的情况下所能获得的一样接近- 除了影响父项之外，还影响悬停时的子项。这只有在孩子是父母的宽度和高度的 100% 时才有效

2022 年编辑：我们使用 :has() 伪类 几乎 拥有此功能。因此，如果您将来阅读本文，您 可以 根据您的浏览器需求 执行此操作：

 .parent:has(.class1:hover) {
   background: #ffffff;
}

原文由 Zach Saucier 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以通过将此属性添加到子类 CSS 来简单地实现这一点。

 pointer-events: none;

这对我有用。

原文由 sam thomas 发布，翻译遵循 CC BY-SA 3.0 许可协议