Question

我正在尝试使用css hover更改另一个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：

Updated Example

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

如果包含.c元素的元素没有类或id，那么您可以使用通用选择器：

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

Answer 2

我不太确定你要做什么，但从我的理解，你希望它突出每个不同的＆＃34;问题＆＃34; sepertly。如果是这样，试试这个：

<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>

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

2 个答案: