Nehmen wir mal folgendes an: ihr habt eine Liste. Wenn ihr mit der Maus über die Liste fahrt, werden alle Listenelemente ausgeblendet und nur das Listenelement hervorgehoben, auf dem ihr mit der Maus steht. So etwa:

Cooler Effekt, oder? Diesen verwende ich an einigen Stellen auf meiner Webseite, unter anderem in der Artikelübersicht. Da ich nun schon einige Anfragen diesbezüglich bekommen habe, dachte ich mir, ich mach mal einen Artikel dazu.

Es ist eigentlich ziemlich simpel und schnell umzusetzen. Aber fangen wir vorne an.

Eine Aufzählungsliste (ul) formatieren wir wie folgt:

.liste ul {
blablub
}

und die Listenelemente (li):

.liste ul li {
blablub
}

Nix neues, klar.

Wenn wir nun über die Liste hovern, soll die Sichtbarkeit der Listenelemente auf 20% gesenkt werden:

.liste ul:hover li {
opacity: 0.2;
}

Auch nix neues, okay.

Um nun das Listenelement hervorzuheben, welches gerade gehovert wird, definieren wir die Sichtbarkeit auf 100%:

.liste ul:hover li:hover {
opacity: 1;
}

Das ist der ganze Trick. Allerdings sieht das noch nicht besonders ansprechend aus, wenn die Sichtbarkeit so schnell wechselt oder? Wie wäre es mit einem netten Übergangseffekt? Mit transition zum Beispiel. Dazu ergänzen wir bei den Listenelementen:

.liste ul li {
blablub
transition: opacity 0.7s ease-in-out;
}

Um den Effekt in Aktion zu sehen, schaut euch die Artikelübersicht an oder diese Live-Demo zum Thema transition. Dort habe ich zwei Beispiele mit Social-Icons.

Die Idee kommt übrigens nicht von mir, sondern von Chris Coyier.