如何使用 CSS 更改子容器悬停时父容器的背景颜色？

使用 CSS 更改子级悬停时的父容器背景颜色

许多人最初可能认为 CSS 缺乏定位父元素的方法，但问题是可以通过巧妙的方法解决在子悬停时更改父容器的背景颜色的问题

使用指针事件和 :hover 的 CSS 解决方案

要达到所需的效果，请创建三个 CSS 规则：

1. 设置指针事件：父 div 上没有，使其对悬停事件无响应。
2. 定义背景在parent-div:hover选择器中改变父元素的颜色。
3. 在子元素上设置pointer-events: auto，以在子元素悬停时触发悬停事件。

这种方法之所以有效，是因为父级悬停事件在其子级悬停时被激活，而父级忽略其悬停伪类，从而允许仅在子级悬停时触发悬停事件

示例

div {
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

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

兼容性

此解决方案与 IE 11 和 Edge 兼容， Chrome 和火狐浏览器。但是，在 IE 11 和 Edge 中，子元素必须具有 display: inline-block 或 display: block 才能使指针事件正常运行。

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