Изменить свойство всех экземпляров элемента при наведении (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; 
} 

Это, вероятно, не будет работать во всех браузерах.