Question

I have a set of divs all with the same class (they don’t have to have the same class if it makes this easier). Ideally what I want is when a user hovers over one of these divs the other divs (with a background image in each) all turn grey to put focus on the currently hovered overed div. If it was the div being hovered over that was changing I would be fine, but I really have no idea how to tackle this. Some kind of sibling selector? I would prefer to just use css and am happy if the solution is not backwards compatible.

Here is my code so far. Thanks in advance!

.box:hover (SELECT ALL OTHER .BOX) {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%); }

edit: I realise I could give each box a different class, and then say when box 1 is hovered over, box 2,3,4 etc go grey, and do that for each.. but this seems like a lot of code for something simple.

Answer 1

The solution that follows will work only if your elements are adjacent, like a navigation bar. Maybe that’s not your situation, but it can help others. Must say that it is cross-browser CSS2.

Wrap your <div> inside a container:

<div class="container">
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
</div>

And use it to control :hover

.target {
    background-color: #444;
}
.container {
    float: left;
}
.container:hover .target {
    background: #bbb;
}
.container .target:hover {
    background: #444;
}

It’s working here