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

无法使用 CSS 直接定位父元素

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

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

兼容性：

• IE 11 和Edge
• Chrome
• Firefox

步骤：

1. 禁用父级上的指针事件div: 这确保 div 忽略 :hover事件。

div {
  pointer-events: none;
}

2. 更改悬停时的父级背景： 设置当父级悬停时要更改的背景颜色。

div:hover {
  background: #F00;
}

3. 在子项上启用指针事件：这允许悬停仅当子元素悬停时触发事件。

div > a {
  pointer-events: auto;
}

说明：

当子元素悬停时，父级 div 也会悬停，因为指针事件属性。然而，由于pointer-events: none 设置，父级的悬停伪类被忽略。通过在子元素上启用指针事件，悬停事件仅在子元素上触发，从而导致父元素的背景颜色根据需要更改。

注意：在 IE 11 和 Edge 中，子元素必须具有 display: inline-block 或 display: block 才能使指针事件正常运行。

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