Zmiana stylu wszystkich innych elementów, gdy jeden element jest zawieszony

Question

Załóżmy, że mam kilka elementów div na tym samym poziomie DOM. Po najechaniu na jeden, chcę, aby wszyscy inni zmienili styl (np. Zmniejsz krycie lub zmień tło), podczas gdy ten, który się unosi, pozostaje taki sam.

Nie mogę używać selektorów + lub ~, ponieważ potrzebuję go do wybrania wszystkich rodzeństwa, a nie tylko bezpośrednio sąsiadującego lub tylko następujących rodzeństwa. Zasadniczo szukam selektora "wszystkie rodzeństwo, ale ten". Czy to istnieje? Czy istnieje sposób na osiągnięcie tego bez JavaScript?

Answer 1

Sztuką jest umieszczenie pseudo-selektora na elemencie nadrzędnym w elemencie nadrzędnym, a następnie należy odpowiednio oznaczyć dziecko. Oto co mam na myśli:

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

Oto demo: http://jsfiddle.net/joshnh/FJAYk/

Answer 2

Powyższy przykład jest bardzo dobra, ale jeśli istnieje różnica pomiędzy div i nie chcesz, aby wywołać efekt po najechaniu kursorem na puste miejsce nie ma potrzeby używania javascript.

Oto proste obejście:

wystarczy dodać float:left do .child i mieć pewność, że .parent ma overflow:visible (powinien być widoczny domyślnie).

W ten sposób .parent staje się 0px wysoki (więc puste miejsce nie wywoła efektu), ale zatrzymanie nad .child wyzwala pseudoklasy :hover.