Cambiar el estilo de todos los demás elementos cuando un elemento está suspendido

Question

Digamos que tengo un montón de divs en el mismo nivel de DOM. Cuando sobrevivo uno, quiero que todos los demás cambien de estilo (es decir, reduzcan la opacidad o cambien el fondo), mientras que el que está suspendido permanece igual.

No puedo usar los selectores + o ~, porque lo necesito para seleccionar todos los hermanos, no solo los que están directamente adyacentes o solo los siguientes hermanos. Básicamente lo que estoy buscando es un selector de "todos los hermanos, pero este". ¿Existe esto? ¿Hay alguna manera de lograr esto sin JavaScript?

Answer 1

El truco consiste en colocar el pseudo-selector del elemento emergente en el elemento principal y, a continuación, darle un estilo al niño en consecuencia. Esto es lo que me refiero:

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

aquí es una demostración: http://jsfiddle.net/joshnh/FJAYk/

Answer 2

El ejemplo anterior es muy buena, pero si hay margen entre divs y usted no quiere que el efecto de desencadenar al pasar el cursor sobre el espacio vacío, no hay necesidad de javascript.

Aquí hay una solución simple:

sólo tiene que añadir float:left-.child y asegúrese de que tiene .parentoverflow:visible (que debería ser visible por defecto).

De esta manera, se convierte en .parent 0px alta (espacio tan vacío no activará el efecto), pero se cierne sobre ambos disparadores .child:hover pseudoclasses.