CSS悬停更改另一个div（在另一个单独的包装div中）

Question

我试图用css悬停更改另一个div元素。 当它们在同一容器中时，我可以正常工作。 但是在我的网站上，必须更改的元素必须位于另一个单独的包装div下。

HTML

<div class="a">Div A</div>
<div id="box">
    <div class="c">Div C</div>
</div>

CSS

.a:hover ~ .c {
    background: #3F6;
}

#box {
}

这是我想要实现的...当将鼠标悬停在Div A上时，它在第一组中起作用。在第二组上却不起作用。 https://jsfiddle.net/69017jwc/

Answer 1

在第二个示例中， .c不是.a元素的同级。

您需要选择同级#box元素，然后从那里选择后代.c元素.a:hover ~ #box .c ：

更新示例

.a:hover ~ .c,
.a:hover ~ #box .c {
    background: #3F6;
}

如果包含.c元素的元素没有类或ID，则可以使用通用选择器：

.a:hover ~ * .c {
    background: #3F6;
}

Answer 2

我不太确定您要做什么，但据我了解，您希望它分别突出显示每个不同的“问题”。 如果是这样，请尝试以下操作：

<div>
<div class="a">Div A</div>
<div class="b">Div B</div>
<div class="c">Div C</div>
</div>
<br /><br />
<div class="a">Div A</div>
<div class="b">Div B</div>
<div class="c">Div C</div>