Change property of all instances of element on hover (CSS)

问题

I have a group of article elements, using nth-child the odd ones have their background-colors set to blue and the rest red.

See Here: http://jsfiddle.net/8KFwh/4/

I'm looking to be able to change the background color of all the article elements to white when you hover over just one of them. Furthermore the one that you hover over will change it's background-color to green, leaving all article elements white except for one.

I know it would be easy to do in JS but I'm interested to know if it's possible to do in CSS.

Thanks, any help is welcome :)

回答1:

You mean like this? http://jsfiddle.net/mkoistinen/8KFwh/5/

回答2:

If you wrap all your articles in a div such as

<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>

and use this CSS then it is possible.

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

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

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

This probably won't work in all browsers though.

来源：https://stackoverflow.com/questions/10337020/change-property-of-all-instances-of-element-on-hover-css