[Tutorial]HowTo: MouseOver Effekt via CSS

Xereon · 07/16/2009, 19:33

Ok Leute wieder mal ein TUT von mir. Diesmal geht es darum wie ihr einen simplen MouseOver Effekt mit CSS erstellen könnt. Dazu braucht man eigentlich auch kaum Vorkenntnisse, wie man jedoch CSS benutzt wäre vorteilhaft.
Diese Methode eignet sich vorallem um schnell mal paar Links schöner zu gestalten, jedoch eignet sich Javascript für solche Sachen mehr und ist vorallem vorzuziehen wenn es um komplizierte Menüführung usw geht.

Ok aber dann wollen wir doch gleich mal loslegen.
Also starten wir einfach indem wir mal paar Links setzen und diese einem DIV Objekt unterordnen:

Code:

<div>
   <a href="test.php">Home</a><br>
   <a href="test.php">Forum</a><br>
   <a href="test.php">Downloads</a><br>
   <a href="test.php">IRC</a><br>
   <a href="test.php">Credits</a><br>
</div>

So ist bis jetz noch nix besonderes, aber das wird sich gleich ändern. Geht nun zu euren CSS File und erstellt eine neue Klasse, ABER: wir hängen noch a:link ran. Das sieht dann etwas so aus:

Code:

.MouseOver a:link {
}

Ok jetz definiere ich noch die Font Size genauer:

Code:

.MouseOver a:link {
   font-size: 24px;
}

So jetz binden wir die Klasse in unser HTML Script ein:

Code:

<div class="MouseOver">
   <a href="test.php">Home</a><br>
   <a href="test.php">Forum</a><br>
   ....
</div>

Jedes <a> Element kriegt jetz erstmal die Eigentschaft Font-Size 24px zugewiesen. Wenn wir jedoch unseren CSS file etwas abändern bekommen wir sehr schnell einen schönen MousOver Effekt hin:

Code:

.MouseOver a:link {
   font-size: 24px;
}

.MouseOver a:hover {
   font-size: 28px;
}

So: :hover kommt dann immer zu Einsatz, wenn die Maus sich auf den Objekt befindet. Solltet ihr jetz alles richtig gemacht haben, dann solltet ihr jetz eine Liste von Links haben, die sich vergrößern sobal ihr mit der Maus über sie fährt. Ich hoffe euch hat das Tutorial gefallen und konntet dabei etwas lernen. Die Methode funktioniert natürlich auch mich Colour, Background-Image usw.

PS(edit):

Ihr müsst übrigens nicht a:link bzw. a:hover nehmen. Ihr könnt das ganze auch so gestalten:

Code:

.classname:link {
...
}

.classname:hover {
...
}

Hier ist jedoch aufzupassen das dies auch zu Komplikationen führen kann, da dies nähmlich auch für Text gilt.

------------PS END--------------

MFG

Xereon

Adroxxx · 07/16/2009, 19:48

Schönes Tutorial.
Wobei ich die Variante mit listenobjekten bevorzuge, weil man da mehr Kontrolle beim Stylen hat.