Weiche Hover-Effekte mit CSS
Hover-Effekte mit JavaScript sind schon länger out. Um beispielsweise die Farbe oder das Aussehen eines Buttons bei Mausberührung zu ändern, geizte man früher keineswegs mit JavaScript. Als sich die Cascading Style Sheets (CSS) langsam aber sich durchsetzten verschwanden diese JavaScripts nach und nach – mittlerweile sind sie schon eher eine Rarität. CSS-Hover-Effekte funktionieren fast überall. Ein weiterer großer Vorteil: Auch wenn der User JavaScript deaktiviert hat, kann mittels CSS eine gewisse Dynamik erreicht werden.
Veerle Pieters hat nun ein Code-Beispiel veröffentlicht, das „weiche“ Hover-Effekte möglich macht. Wenn zum Beispiel eine Hintergrundgrafik durch eine andere ersetzt werden soll, muss der Browser die neue Grafik erst laden. Folgender Effekt: Die Maus befindet sich schon auf dem zu verändernden Element, allerdings sieht der User die Veränderung erst nach einer kurzen Verzögerung. Um dies zu umgehen arbeitet Veerle mit background-position. Wie das funktioniert kann in ihrem Artikel gelesen werden.
ich mag‘ mich irren, aber wo ist der unterschied zu sliding doors?
Ja, du hast Recht, es ist die Sliding Doors Technik. Das Besondere hier ist, dass es auf eine Liste angewendet wurde. Ist jetzt was Aktuelles gewesen, als die Sliding Doors Technnik auf ALA publik wurde habe ich noch nicht gebloggt *g* ;-)
Danke für den Hinweis!
Nicht nur der Artikel von Veerle Petres ist interessant, auch das Design seines Blogs finde ich sehr gelungen;-)