Rollover mit Animation

:hover mit leichter Verzögerung

  Rollover-Effekte kannst du noch interessanter machen, wenn du eine kleine, aber feine Animation einfügst.

Fahre mit der Maus über den Link in der Vorschau und warte ein wenig (funktioniert nicht auf Touch-Screens!):

a:hover {
	color: #FF0000;
	transition: color .7s;
}

Vorschau (formatiert)


🤔 In CSS gibt es "Animations" und "Transitions". Das ist aber ein weites Feld, das ich dir hier nicht erklären kann.

Spielereien mit :hover

Lea Verou macht es mit Ihrer genialen Bibliothek "prism.js" möglich, dass der Code auf dieser Seite farbig dargestellt wird.
Sie hat aber auch ein "Show Case" gemacht, der zeigt, was mit CSS Rollover alles möglich ist: animatable.