Изменение стиля всех остальных элементов при зависании одного элемента

Question

Предположим, у меня есть куча divs на том же уровне DOM. Когда я нависаю над одним, я хочу, чтобы все остальные меняли стиль (т. Е. Уменьшали непрозрачность или меняли фон), в то время как тот, который зависал, оставался неизменным.

Я не могу использовать селектор или ~, потому что он мне нужен, чтобы выбрать всех братьев и сестер, а не только непосредственно соседних или только следующих братьев и сестер. В основном то, что я ищу, - это «все братья и сестры, но этот». Это существует? Есть ли способ достичь этого без JavaScript?

Answer 1

Трюк заключается в том, чтобы поместить псевдо-селектор наведения на родительский элемент, а затем соответствующим образом начертить его. Вот что я имею в виду:

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

Вот дем: http://jsfiddle.net/joshnh/FJAYk/

Answer 2

В приведенном выше примере очень хорошо, но если есть разница между дивами, и вы не хотите, чтобы вызвать эффект при падении над пустым пространством, нет необходимости в javascript.

Вот простое решение:

float:left просто добавить к .child и быть уверенным, что .parent имеет overflow:visible (она должна быть видна по умолчанию).

Делая это, .parent становится 0px высокой (так пустое пространство не будет вызывать эффект), но парит над .child запускает оба :hover pseudoclasses.