如何使用纯CSS关闭父元素悬停在其子元素上时的悬停效果？

不幸的是，CSS 选择器目前缺乏根据子元素状态设置父元素样式的功能。为了规避这个限制，我们将采用一种巧妙的技术，使用额外的同级元素。

在我们的 CSS 中，我们定义 .parent 元素及其尺寸和填充以及灰色背景。当鼠标悬停在 .parent 上时，其背景变为浅蓝色。

关键部分是 .child 元素。我们使用负边距（顶部：-200px；）将其放置在其父级之上一段距离，并为其提供深灰色背景，在悬停时过渡为黑色。

最后，我们介绍 .sibling 元素。这是一个占位符元素，其位置和大小与 .child 匹配，但位于其左侧和上方稍稍的位置。它还具有彩色背景，悬停时会转换为白色。

当鼠标光标悬停在 .child 上时，.child 元素会将其背景颜色转换为黑色。同时，这会导致 .sibling 元素重叠并覆盖之前悬停在 .parent 上的部分。因为 .sibling 是透明的，所以 .parent 原来的灰色背景再次可见。

因此，当您将鼠标悬停在 .child 上时，它会变成黑色并隐藏 .parent 之前突出显示的部分。这会产生一种错觉，即 .parent 的背景已变回其原始颜色，尽管 .sibling 后面实际上仍然是灰色的。

尽管纯 CSS 在这种情况下有局限性，但此技术提供了一种优雅且简洁的效果。当您将鼠标悬停在子元素上时关闭父元素上的悬停效果的有效解决方案。