Изменить фоновый цвет в двух разных div на одном зависании

Question

Я не знаю, как правильно спросить, но я постараюсь это сделать. У меня есть тонны абсолютных div. Все divs с разными классами. Когда я нахожу один div, мне нужно изменить background-color на этот зависающий div, также в то же время, другой div должен зависнуть, даже если этот элемент не зависает. Что мне нужно, так это то, что мне нужно изменить цвет фона divs при зависании в одном зависании.

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

---

Если требуется обе кнопки, чтобы быть парил, вам нужно будет иметь контейнер, по которому вы могли бы парить и, в свою очередь, изменить стили потомков:

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

JSFiddle

Answer 2

Alter ваш 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; }