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>