更改CSS中的其他元素

Question

我一直想知道为什么这样做不会有意义。

CSS：

#button1:hover {
    background: green;
    #button2 {
        background: red;
    }
}

HTML

<button id="button1"></button>
<button id="button2"></button>

如果我将鼠标悬停在Button1上，Button2的背景也会改变。

除了使用Javascript之外，还有解决方法吗？

Answer 1

您可以使用相邻的选择器

#button1:hover {
    Background: green;
}
#button1:hover + #button2 {
    Background: red;
}

查看所有css选择器：http://css-tricks.com/almanac/

哦，顺便说一句，只有在悬停元素之后才能将css悬停在元素上。悬停元素之前的父元素和元素无法在悬停时使用css进行样式设置。这是css的限制。

Answer 2

这可以做到，但CSS缺乏提供强大的条件语句的能力。但是，如果你看一下SASS CSS LESS，它就会开始发生。