Chukki.de - Der Tumblr-Blog über Webdesign, Wordpress, Social Media, Cloud und Webentwicklung

Der normale Hover Effekt durch CSS reicht vielen aus, wer es jedoch etwas hübscher haben möchte, kann Mootools zur Hilfe nehmen. Durch ein paar Zeilen Code wird aus den 2 Zuständen (Normal & Hover) eine Animation gebildet. Dies ist ganz nützlich um ein wenig “Ambiente” in die Seite zu bringen und sie etwas dynamischer wirken zu lassen.

Dazu nutzen wir die Mootools Funktion tween, welche einen Überlauf zwischen zwei CSS Eigenschaften zulässt.

$$('a').each(function(link){
    var hover_color = link.getStyle('color');
    link.addEvents({
        'mouseenter': function (){ this.tween('color', '#fa8749'); },
        'mouseleave': function (){ this.tween('color', hover_color); }
    });
});

Wir nehmen den DOM Selektor ($$) und weisen ihm a (alle Links) zu. Durch die Funktion each wird mitgeteilt das jeder Link durch die folgenden Zeilen Code beeinflusst werden soll. In der Variable hover_color speichern wir die Ausgangsfarbe des Links um nach dem hover wieder die Ursprungsfarbe herzustellen.

Die beiden Events mouseenter und mouseleave führen die Animation anschliessend aus.

Damit ist es schon getan. 7 Zeilen Code um eine kleine Animation zu zaubern. In der Demo bzw. beim Download habe ich zusätzlich mit einer Klasse gearbeitet, um den Unterschied zwischen dem normalen hover und dem animierten, innerhalb einer Datei besser ersichtlich zu machen. Dafür habe ich einfach den Selektor (oben a – Alle Links) durch eine CSS Klasse ersetzt.

Andere interessante Posts...