css - 更改 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 的限制。