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

鼠标悬停时，更改父容器的背景颜色（仅限 CSS）

虽然通常不可能直接使用 CSS 定位父元素，有针对特定场景的变通解决方案。其中一种场景是将鼠标悬停在其子元素上时更改父容器的背景颜色。

解决方案：指针事件和 :hover

此方法利用指针事件和:hover 伪类：

1. 指针事件：无父元素： 这使得父元素非交互式，忽略悬停事件。
2. ：悬停在父元素上： 定义悬停时父元素所需的背景颜色变化。
3. pointer-events: auto on child: 仅为子元素重新启用悬停事件，允许它们触发父级的背景颜色更改。

兼容性：

• 适用于 IE 11 和 Edge、Chrome 和 Firefox。
• 注意：IE 11 和 Edge 要求子元素具有 显示： inline-block 或 display: block 以使指针事件起作用。

示例：

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

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

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