Hover on „Everything But“

Ein Hover-Zustand für ein Element hinzuzufügen ist verdammt einfach. Nehmen wir als Beispiel eine Opazitätsänderung.

div {
   opacity: 1.0;
}
div:hover {
   opacity: 0.5;
}

Aber was, wenn wir wollen, dass dieser Hover-Zustand für *alles außer* dem Element gilt, das gerade angeklickt wird? (z.B. andere benachbarte Geschwister-Divs)

Nehmen wir dieses grundlegende HTML an.

<section class="parent">
  <div></div>
  <div></div>
  <div></div>
</section>

Wir wenden die aktuellen CSS-Eigenschaften auf alle Kinder des Elternteils an, wenn sich das Elternteil im Hover-Zustand befindet.

.parent:hover > div {
  opacity: 0.5;
}

Dann, wenn das Elternteil gehovert wird *und* das einzelne Div gehovert wird, erhöhen wir die Opazität wieder und erzielen so den gewünschten Endeffekt.

.parent:hover > div:hover {
  opacity: 1.0;
}

Reale Welt?

Eine ähnliche Sache gibt es in der Twitter für Mac App bei einzelnen Tweets.

Demo

Diese Idee kann auf mehrere Ebenen ausgedehnt werden. Hier ist ein Beispiel für drei „Listen“. Alle Listenelemente haben im normalen Zustand volle Opazität, aber wenn man über die Listen fährt, ist die aktuell gehoverte Liste etwas undurchsichtiger als die anderen, und das aktuell gehoverte Listenelement ist vollkommen undurchsichtig.

Demo anzeigen   Dateien herunterladen

Und ja, alte Browser-Bekannte verstehen :hover nur bei Ankerlinks. Wenn es auf die Mission ankommt, verwenden Sie JavaScript, um mouseenter-Ereignisse darauf zu erkennen und Klassennamen anzuwenden/zu entfernen.

Update August 2012: Michelle Eaton schreibt mit diesem JavaScript, um die Aufgabe zu erledigen, wenn Sie es unbedingt brauchen.

$("#all ul li").hover(function() { // Mouse over
  $(this).siblings().stop().fadeTo(300, 0.6);
  $(this).parent().siblings().stop().fadeTo(300, 0.3); 
}, function() { // Mouse out
  $(this).siblings().stop().fadeTo(300, 1);
  $(this).parent().siblings().stop().fadeTo(300, 1);
});