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

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

子元素悬停时如何更改父元素背景颜色的问题很常见。通常，此类问题被认为是有关 CSS 是否支持父选择器的询问的重复。

虽然 CSS 确实不提供直接父选择器，但有一些 CSS 解决方案可以解决此特定问题。

使用指针事件和:hover

此技术涉及三个步骤：

1. 将pointer-events: none属性应用于父元素。这将使父元素忽略悬停事件。
2. 定义悬停时父元素的背景颜色变化：parent:hover {background:#F00; }
3. 在子元素上设置pointer-events: auto。这确保只有子级触发悬停事件，从而间接影响父级。

工作原理：

• 当子级悬停时，由于事件冒泡，父级也会悬停。
• 但是，父级的pointer-events: none属性阻止它不会响应自己的悬停伪类。
• 由于子级具有指针事件：auto，因此它有效地启用事件冒泡并触发父级的悬停。

示例：

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>

此解决方案与浏览器兼容，包括IE 11、Edge、Chrome 和 Firefox。对于 IE 11 和 Edge，子元素必须具有 display: inline-block 或 display: block 才能启用指针事件。

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