Cambia stile di tutti gli altri elementi quando un elemento è al passaggio del mouse

Question

Diciamo che ho un gruppo di div allo stesso livello DOM. Quando passo il mouse sopra uno, voglio che tutti gli altri cambino stile (cioè riducano l'opacità o cambino lo sfondo), mentre quello che si libra rimane lo stesso.

Non riesco a utilizzare i selettori + o ~, perché ne ho bisogno per selezionare tutti i fratelli, non solo quello direttamente adiacente o solo i fratelli successivi. Fondamentalmente quello che sto cercando è un selettore "tutti i fratelli, ma questo". Questo esiste? C'è un modo per ottenere questo senza JavaScript?

Answer 1

Il trucco consiste nel posizionare lo pseudo-selettore di passaggio del mouse sull'elemento padre e quindi impostare lo stile del bambino di conseguenza. Ecco cosa mi riferisco a:

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

Ecco una demo: http://jsfiddle.net/joshnh/FJAYk/

Answer 2

L'esempio di cui sopra è molto buono, ma se c'è margine tra div e non si desidera che l'effetto di innescare quando si passa sopra lo spazio vuoto, non è necessario javascript.

Ecco una soluzione semplice:

basta aggiungere float:left-.child ed essere sicuri che .parent ha overflow:visible (dovrebbe essere visibile per impostazione predefinita).

In tal modo, .parent diventa 0px alto (quindi lo spazio vuoto non attiverà l'effetto) ma il passaggio del tempo sopra .child attiva entrambe le pseudoclass :hover.