在一个悬停上更改两个不同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

您可以使用相邻的兄弟选择器:

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

的jsfiddle

或者,如果按钮没有立即跟随(但仍然跟随,作为兄弟),您可以使用通用兄弟选择器:

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

的jsfiddle

如果您需要两个按钮悬停,您需要有一个容器,您可以在其上悬停,然后更改后代的样式:

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

的jsfiddle