Ändern Sie den Stil aller anderen Elemente, wenn ein Element aktiviert ist

Question

Angenommen, ich habe eine Reihe von divs auf derselben DOM-Ebene. Wenn ich den Mauszeiger über einen Punkt halte, möchte ich, dass alle anderen den Stil ändern (z. B. die Opazität reduzieren oder den Hintergrund ändern), während der, der sich im Kreis befindet, gleich bleibt.

Ich kann die + oder ~ Selektoren nicht verwenden, weil ich es brauche, um alle Geschwister auszuwählen, nicht nur die direkt benachbarten oder nur die folgenden Geschwister. Was ich eigentlich suche, ist ein "alle Geschwister, aber dieser" Selektor. Gibt es das? Gibt es eine Möglichkeit, dies ohne JavaScript zu erreichen?

Answer 1

Der Trick besteht darin, den Hover-Pseudo-Selektor auf das Elternelement zu platzieren und dann das Kind entsprechend zu formatieren. Hier ist, was ich bin auf:

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

Hier ist eine Demo: http://jsfiddle.net/joshnh/FJAYk/

Answer 2

Das obige Beispiel ist sehr gut, aber wenn es Spielraum zwischen divs und Sie nicht wollen, um den Effekt auszulösen Wenn man über den leeren Raum schwebt, ist kein JavaScript erforderlich.

Hier ist eine einfache Abhilfe:

nur float:left-.child hinzufügen und sicher sein, dass .parent hat overflow:visible (es sollte standardmäßig sichtbar sein).

Dadurch .parent wird 0px hoch (so leerer Raum wird nicht den Effekt ausgelöst) aber Schweben über .child löst beide :hover Pseudoklassen.