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

---

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

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

JSFiddle