Change the style of all other elements when one element hangs

Question

Let's say I have a bunch of divs at the same DOM level. When I’m on one, I want everyone else to change the style (i.e., reduce the opacity or change the background), while the one that hangs remains the same.

I cannot use the + or ~ selector, because I need to select all brothers and sisters, and not just directly neighboring or only the next brothers and sisters. Basically, what I'm looking for is "all brothers and sisters, but this one." Does it exist? Is there a way to achieve this without JavaScript ?

Answer 1

The trick is to place the pseudo-hover selector on the parent element and then draw it accordingly. Here is what I mean:

 .parent:hover .child { opacity: .5; } .parent .child:hover { opacity: 1; } 

Here is a demo: http://jsfiddle.net/joshnh/FJAYk/

Answer 2

The above example is very good, but if there is a difference between the div and you do not want the effect to work when you hover over empty space, there is no need for javascript.

Here is an easy way:

just add float:left to .child and make sure .parent has overflow:visible (it should be visible by default).

Thus .parent becomes 0px high (therefore, the effect will not work on empty space), but hovering over .child calls as a pseudo- .child :hover .