将子项悬停在父项内，也会影响其他父项内的其他子项（兄弟父项）

Question

我对悬停兄弟姐妹的其他孩子有疑问，这是我的代码：

<div class="parent">
  <div class="child">
</div>
<div class="parent">
  <div class="child">
</div>
<div class="parent">
  <div class="child">
</div>

我尝试了这种风格的代码，正在工作，但我发现了一些问题

.parent:has(.child:hover) ~ .parent .child {
  background-color: red;
}

问题是，当第一个孩子悬停时，所有其他孩子（第二个和第三个）也悬停，但是当我悬停第二个孩子时，只有第三个孩子悬停，第一个孩子不受影响......可以请您帮我解决问题，谢谢。

Answer 1

:has

选择器现在适用于大多数浏览器（CanIUse）。

.parent {
  border: 3px solid black;
  margin: 10px;
  padding: 10px;
}

.child {
  padding: 10px;
  border: 3px solid blue;
}

.child:hover,
.parent:has(.child:hover)~.parent .child {
  background-color: orange;
}

<div class="parent">
  <div class="child">child 1</div>
</div>
<div class="parent">
  <div class="child">child 1</div>
</div>
<div class="parent">
  <div class="child">child 1</div>
</div>