更改子级悬停时父容器的背景颜色（仅限 CSS）

而有关使用 CSS 选择父元素的问题通常标记为重复，它忽略了实际解决方案的需要。特别是，当鼠标悬停在其子容器上时更改父容器的背景颜色的问题可以通过仅 CSS 方法来解决。

指针事件和悬停：

为了达到这个效果，我们可以操作指针事件和:hover伪类：

1. 设置pointer-events: none on父元素。 这可以防止父元素接收任何悬停事件。
2. 定义悬停时所需的父元素背景颜色变化。
3. 设置指针-events: auto on the child. 这允许子元素触发悬停事件，即使父元素忽略他们。

示例：

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

  Anchor Text

此解决方案有效地捕获子元素上的悬停事件，允许父容器的背景在子元素悬停时发生变化，所有这些都无需使用 JavaScript。