在一个悬停上更改两个不同div中的背景颜色

Question

我不知道如何正确地问这个，但我会尝试这样做。我有很多绝对的div。所有div都有不同的类。当我悬停一个div时，我需要将background-color更改为那个悬停的div，同时，即使该元素没有悬停，另一个div也应该悬停。我的意思是，我需要在悬停时更改两个div背景颜色。

CSS

.button1 { position:absolute; left:10px; top:10%; width:10%; height:10%; background:red; }
.button2 { position:absolute; left:10px; top:25%; width:10%; height:10%; background:blue; }

.button1:hover { background:green; }
.button2:hover { background:green; } 

etc //

HTML

<div class="button1"></div>
<div class="button2"></div>

etc //

jsfiddle

抱歉英语不好，谢谢你的回答。

Answer 1

您可以使用adjacent sibling selector：

.button1:hover + .button2 { background:green; }

JSFiddle

或者，如果按钮不会立即跟随（但仍然跟随，作为兄弟），您可以使用general sibling selector：

.button1:hover ~ .button2 { background:green; }

JSFiddle

如果你需要两个按钮悬停，你需要有一个容器，你可以悬停，然后改变后代＆＃39;样式：

.container:hover > div { background:green; }

JSFiddle

Answer 2

改变你的CSS。

这是fiddle

HTML

<div class="button1"></div>
<div class="button2"></div>

CSS

.button1 { position:absolute; left:10px; top:10%; width:10%; height:10%; background:red; }

.button2 { position:absolute; left:10px; top:25%; width:10%; height:10%; background:blue; }

.button1:hover { background:green; }
.button1:hover + .button2 { background:green; }