在悬停（CSS）上更改元素的所有实例的属性

Question

我有一组文章元素，使用nth-child，奇数的背景颜色设置为蓝色，其余为红色。

见这里：http://jsfiddle.net/8KFwh/4/

当您将鼠标悬停在其中一个元素上时，我希望能够将所有文章元素的背景颜色更改为白色。此外，您悬停在其上的那个将其背景颜色更改为绿色，除了一个之外，所有文章元素都保持白色。

我知道在JS中这很容易，但我很想知道它是否可以在CSS中完成。

谢谢，欢迎任何帮助：）

Answer 1

你是说这个意思吗？ http://jsfiddle.net/mkoistinen/8KFwh/5/

Answer 2

如果您将所有文章包装在div中，例如

<div class="hover-test">
    <article class="post">ABC</article>
    <article class="post">ABC</article>
    <article class="post">ABC</article>
    <article class="post">ABC</article>
</div>

然后使用这个CSS就可以了。

.post:hover {
background-color:green;
}

.hover-test:hover .post {
background-color: white;
}

.hover-test:hover .post:hover {
background-color: green;
}

但这可能不适用于所有浏览器。