Cursor per CSS ändern – How To
CSS lassen sich ganz wunderbar dazu verwenden den Cursor zu verändern. Wozu das gut ist? Na stellen Sie sich doch mal ein DIV vor auf dem Sie ein Javascript onClick gelegt haben. Trotz allem verändert sich der Cursor nicht wenn Sie über das DIV fahren. Dumm oder? Genau!
Und hier die Lösung:
h2 {
cursor: pointer
}
Mit diesem Beispiel wird der Cursor bei jeder Überschift zweiter Ordnung auf “Pointer” gesetzt. Pointer steht hier für die Hand, wie sie normalerweise bei Links erscheint. Toll oder?
Weitere Cursorvarianten gefällig? Einfach mal mit der Maus drüber fahren und ausprobieren:
default
help
wait
text
crosshair
auto
s-resize (Pfeil nach "Süden")
se-resize (Pfeil nach "Süd-Osten")
hand (Pointer Ersatz - nur für IE)
Und jetzt kommt der Clou. Wem das alles zu langweilig ist, kann auch einen eigenen Cursor erstellen und einbinden:
p{
cursor : url("test.cur"), url("test2.cur"), help
}
Dabei werden die einzelnen Cursor der Reihe nach abgearbeitet, bis einer geladen werden konnte. Ähnlich der Auflistung unterschiedlicher Schriftarten in CSS. Am Ende der Liste sollte aber einer der Standartcursor stehen, nur für den Fall, das sich keine der URLs laden ließ.
Jens Wiese, ein Master of Computer Science Student im ersten Semester. Er liebt seinen Mac und neue, lustige, interessante, sinnlose Websiteideen. Jens lebt in Furtwangen im Schwarzwald, dort wo Fuchs und Hase sich noch "Gute Nacht" sagen.




