除了将鼠标悬停在div上之外，如何定位同一类别的所有div？

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

Answer 2

There isn't a sibling combinator that lets you select all other siblings of another element. Atomically you would represent this with .box:not(:hover) as shown in other answers, but you can't select all other .box:not(:hover) elements relatively to a .box:hover element in the same parent.

You could do this partway with the sibling combinators + and ~ , but they only look at siblings that follow an element:

.box:hover ~ .box {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

This means if you hover the 2nd box, then only the 3rd and 4th boxes will gray out but not the 1st.

There isn't a way to select preceding siblings with CSS. Currently the only way to accomplish what you want is to use JavaScript to toggle your styles on the other boxes when hovering a particular box.

Answer 3

Using :not CSS3 selector

div.box:not(:hover) { ... }

if is this what you mean...