How to target all divs of the same class, except for hovering over the div?

Question

I have a set of divs with the same class (they should not have the same class, if that simplifies). Ideally, I want the user to hover over one of these divs, the other divs (with a background image in each) turn gray to focus on the current hovering div. If it was a div that was hanging over what was changing, I would be fine, but I really don't know how to handle this. Some kind of selector? I would rather just use css and be happy if the solution is not backward compatible.

Here is my code. 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 understand that I can give each box a different class, and then say when field 1 is frozen, window 2,3,4, etc. gray and do it for everyone ... but it seems like a lot of code for something simple.

Answer 1

The following solution will only work if your elements are adjacent, such as a navigation bar. This may not be your situation, but it may help others. I have to say that this is cross-browser CSS2.

Wrap the <div> inside the 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; } 

Works here

Answer 2

There is no combinator that allows you to select all the other siblings of another element. Atomically, you represent this with .box:not(:hover) , as shown in other answers, but you cannot select all the other .box:not(:hover) elements relative to the .box:hover element in the same parent.

You can do this in part using the sibling + and ~ compilers, but they will only look at the siblings following the 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 that if you move the 2nd box, then only the 3rd and 4th boxes will be gray, but not the 1st.

Unable to select previous siblings using CSS. Currently, the only way to achieve what you want is to use JavaScript to switch your styles to other fields when a certain window hangs.

Answer 3

Usage :not CSS3 selector

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

if that's what you mean ...