当鼠标悬停在子元素上时，如何仅使用 CSS 更改父容器的背景颜色？

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

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

指针事件和悬停：

为了实现这种效果，我们可以操纵指针事件和 :hover伪类：

1. 在父元素上设置指针事件：无。这可以防止父元素接收任何悬停事件。
2. 定义悬停时所需的父背景颜色会发生变化。
3. 在子元素。 这允许子元素触发悬停事件，即使父元素忽略它们。

示例：

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

<div>
  <a href="#">Anchor Text</a>
</div>

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

以上是当鼠标悬停在子元素上时，如何仅使用 CSS 更改父容器的背景颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！