img:hover falkern

[mikado]

Hallo,

auf der Seite floralpower sieht man mittig die aktuellen Porjekte. Geht man mit der Maus drüber (mom. nur beim Ersten) soll das Bild wechseln. Das eigentliche Bild kann ich aber nicht ändern da es als im TL-Backend als img eingebunden wird. Ich kann es also nur ausblenden und das darunter liegende Bild sichtbar machen.

Hat jmd ne Idee wie ich das Flackern weg bekomme. Das kommt sicher daher, da die img:hover { display:none; } Aktion bei jeder Mausbewegung ausgeführt wird.

Danke

Edit: sorry falsches Topic

[Andreas]

Vielleicht kommt es auch daher, dass das IMG den Container aufbläht und wenn es unsichtbar ist reagiert der Container anders, er schrumpft und dann ist die Maus nicht mehr darüber. Oder noch besser wenn du den hover-Effekt auf das Bild setzt, dann wird der Effekt im gleichen Moment wieder aufgehoben, weil das Bild ja dann nicht mehr da ist.

Du könntest das Template ändern, sodass das Bild nicht mehr als IMG gerendert wird, sondern als style-Attribut für den Hintergrund. Dann könntest du die Bilder als Sprites anlegen, das heißt beide Varianten in einem Bild und den hover-Effekt dafür nutzen die Position zu verändern.

[Andreas]

Noch ne Idee, da das ganze ja ein Menü ist (du verweist auf Seiten), lege das ganze nicht mit Artikeln an, sondern als Menü. Das kannst du dann von außen formatieren, mit Hintergrundbildern. Suche dazu auch die passende Erweiterung. Das Thema hatte ich grade in einem anderen Thread.

[mikado]

danke für die gute Idee mit dem Menu. Das werde ich mir mal durch den Kopf gehen lassen, die Umsetzung würde auch der Funktion gerechter werden. Inzwischen habe ich aber eine simple Lösung gefunden. Wende ich die Peseudoklasse hover nicht auf zwei verschied. Container sondern nur einen an. so klappt es. also nicht div:hover {} und div img:hover {} sondern letzteres zum div:hover img. Auch wenn das wiederrum einige Browser nicht interpretieren können.

Danke