Cursor per CSS ändern – How To

posted in CSS on by with 1 Reply

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ß.

1 Comments on “Cursor per CSS ändern – How To

  • Hallo

    Weiss du wie man per css den blinkend Strich in den Eingabefelder ändern kann.

    Dank Gruss Gino.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.