Man mag nicht glauben, was man alles mit CSS machen kann. Neben der eigentlichen Aufgabe, dem Design der Website, kann man auch noch das Aussehen des wahrscheinlich wichtigstem Bedienelementes bestimmen. Gemeint ist der Cursor oder der so genannte „Mauszeiger“.
In den Browsern wurden alle HTML Elemente schon mit einem Mauszeiger vordefiniert, findet man diese unpassend kann man die CSS Eigenschaft cursor und die dazugehörigen Werte verwenden
Die Eigenschaft cursor
Wie schon gesagt kann man mit der Eigenschaft das Aussehen einstellen, wobei die Browserunterstützung einem oft einen Strich durch die Rechnung macht. Ältere Browser wie der Opera 1-7 und der Netscape 4 ignorieren cursor ganz.
Abschrecken sollte man sich davon aber nicht. Solange die Website weiterhin bedienbar ist ist alles gut. Praktischerweise kann man mehrere Werte, mit einem Komma getrennt, verwenden. Falls der Browser den ersten Wert nicht versteht, nimmt er den nächsten und so weiter.
1 2 3 | Element { cursor: Wert1, Wert2, Wert3, Wert4, Wert5; } |
cursor vererbt den Wert auf Kinderelemente, dass bedeutet wenn ich Beispielweise einem <div> einen anderen Werte gebe bekommen alle HTML Elemente in diesem <div> ebenfalls den Wert.
1 2 3 4 5 6 7 8 | div { cursor: pointer; /*Mauszeiger ist eine Hand mit ausgestrecktem Zeigefinger, wie bei einem Link*/ } <!-- Sowohl das <div>als auch das <p> haben einen pointer als Cursor--> <div> <p>Lorem Ipsum</p> </div> |
Dieses verhalten kann man mit dem Wert Inherit stoppen, verwendet man ihn hört die Vererbung auf.
1 2 3 4 5 6 7 8 9 10 11 | div { cursor: pointer; } p { cursor: inherit; } <!--Nur das <div> hat einen pointer als Cursor--> <div> <p>Lorem Ipsum</p> </div> |
Die Werte im Überblick
Hier ist eine Auflistung der Werte mit Beispiel. Ihr müsst nur über die Orangen Boxen fahren
auto:
cursor: auto;
Überlässt dem Browser die Einstellung und ist die Voreinstellung
default:
cursor: default;
Ist der Standardwert
crosshair:
cursor: crosshair;
Stellt den Cursor als Fadenkreuz dar. Sieht aus wie ein Pluszeichen.
pointer:
cursor: pointer;
Stellt den Cursor als Hand mit ausgestrecktem Zeigefinger dar, wie bei einem Link.
move:
cursor: move;
Zeigt an, dass das Element bewegt werden kann. In den meisten Fällen sind es Pfeile in vier Richtungen
wait:
cursor: wait;
Zeigt an, dass etwas lädt.
progress:
cursor: progress;
Zeigt an, dass etwas lädt, es kann jedoch, im Gegensatz zu wait, weiterhin die Website bedient werden.
url():
cursor: url(Pfad zum Bild);
Es kann ein eigenes Bild verwendet werden. Viele Browser haben mit diesem Wert Probleme.
text:
cursor: text;
Zeigt an, dass es ein Text Element ist.
help:
cursor: help;
Durch diesen Wert erfährt der Besucher, dass er hier Hilfe bekommt.
n-resize:
cursor: n-resize;
Pfeil nach oben (n=north).
ne-resize:
cursor: ne-resize;
Pfeil nach rechts oben (ne=northeast).
e-resize:
cursor: e-resize;
Pfeil nach rechts (e=east).
se-resize:
cursor: se-resize;
Pfeil nach rechts unten (se=southeast).
s-resize:
cursor: s-resize;
Pfeil nach unten (s=south).
sw-resize:
cursor: sw-resize;
Pfeil nach untenlinks (sw=southwest).
w-resize:
cursor: w-resize;
Pfeil nach links (w=west).
nw-resize:
cursor: nw-resize;
Pfeil nach links oben (nw=northwest).
