如何使用父元素上的悬停状态更改子属性？ [复制]

【问题标题】：How do I change a child property using a hover state on a parent element? [duplicate]如何使用父元素上的悬停状态更改子属性？ [复制]
【发布时间】：2022-11-26 06:45:45
【问题描述】：

我正在尝试更改鼠标悬停在父元素内的子元素的背景属性。当父元素处于悬停状态时，我不知道如何选择它。

我尝试使用 wrapper:hover + .box { background-color: red;} 似乎没有触发属性更改。包装器是父元素。

我试图通过使用父元素上的悬停状态来更改子元素上的属性。

.wrapper:hover, .box:hover {
  background-color: #303134;
}

【问题讨论】：

标签： css css-selectors

【解决方案1】：

这应该可以解决问题：

.wrapper:hover .box {
  background-color: #303134;
}

.box 是 .wrapper 的孩子，所以：

.wrapper .box {
 background: red
}

如果它是 .wrapper 的子项，将为框设置红色背景。将:hover添加到.wrapper将仅在处于:hover状态时应用背景色

【讨论】：