如何使用一个元素悬停悬停在悬停元素前面的其他元素

Question

元素A和B在同一父元素中相邻。现在我希望当我悬停在元素B上时，元素A也会受到影响。

.child-a,
.child-b {
height: 200px;
width: 200px;
}
.child-a {
background-color: brown;
}
.child-b {
background-color: blue;
}
.parent .child-b:hover, /* Works */
.parent .child-b:hover + .child-a { /* Doesn't work*/
background-color: black;
}

<div class="parent">
<div class="child-a"> /* should be affected when i hover on element B*/
A
</div>
<div class="child-b">
B
</div>
</div>

Answer 1

在未来的世界中，您可以使用CSS:has选择器来检查父元素是否有这样的悬停元素：.parent:has(.child-b:hover) .child-a

不幸的是，这在没有标志的Firefox中目前仍然不受支持，因此您唯一可以使用的其他方法是检查用户是否悬停在带有.parent:hover的父元素上，然后检查子元素a是否也悬停在上面，如下所示：.parent:hover .child-a:not(:hover)。现在，悬停效果仅适用于将鼠标悬停在parent元素或child-b元素上，而不适用于child-a元素。