Hallo Zusammen,

Mit den Händen über dem Kopf such ich nun hier Hilfe.
Ich plane ein Menü aus Quadraten zu bauen.

Die Kacheln sollen animiert sein und werden nachher per JavaScript ihre Inhalte bekommen.
So weit so gut habe ich bereits folgendes zusammen gezimmert:

Create a New Pen

Jetzt zum Problem:
Mein Wunsch ist es, dass jeweils alle Kacheln umschlagen außer der, über der gerade der Mauszeiger ist (Hover). Das klappt nur bedingt - nur die nachfolgenden Kacheln übernehmen den Effekt. Bin ich jedoch über z.B. der zweiten Kachel, schlägt die erste nicht um, über der dritten Kachel die Erste und Zweite,...

Ich weiß gerade echt nicht mehr weiter und hoffe das mir jemand bei dem (wohlmöglich kleinen-) Problem helfen kann.

Mit Dank im Voraus,

Matthias

Eine reine CSS-Lösung könnte so aussehen:
Hover über die (gesamte) Liste (ul) dreht alle Listenelemente (li).
Hover über ein Listenelement verhindert, dass sich das jeweilige Element dreht.
So in etwa:
Zuerst müsstest Du aber die Floats einschließen und dafür sorgen, dass die Liste (ul) immer nur so groß ist, dass alle Listenelemente rein passen.
Lücken dürfen dabei nicht entstehen. Zeilenweise muss also die Anzahl der Listenelemente immer gleich sein: also 1, 2, 3 oder 6 (alle). Aber nicht 4 oder 5 in der ersten Zeile. Denn dann ist die Zweite unvollständig (Lücken)

Wenn Dir das nicht passt, kannst Du es allein mit JavaScript lösen.

__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Manchmal sieht man echt den Wald vor lauter Bäumen nicht...

Super! Vielen Dank! Das ist genau das was ich gebraucht hab!