Blog

Beiträge, Snippets, Tipps & Tricks
rund um Webdesign, SEO & Co.

Mauszeiger (Cursor) mit CSS ändern

von • Themen: ,
css-cursor

Der Mauszeiger wird ohne CSS automatisch vom verwendeten Browser vorgegeben. Bei einem MouseOver über Links wird der Mauszeiger dabei standardmäßig als Zeigefinger dargestellt. Doch das lässt sich auch ändern.

Mit der CSS-Anweisung „Cursor“ kann der Mauszeiger auf einfache Weise in seiner Darstellung verändert werden. Möchtet ihr den Mauszeiger beispielsweise als Fadenkreuz darstellen, genügt eine einzige Zeile in CSS.

CSS Beispiel für die Anzeige als Zeigefinger/mit einem Bild

.maus-beispiel {cursor: pointer;}
.maus-beispiel-bild { cursor: url(maus.gif), auto }

Die folgenden Werte sind für diese Anweisung verwendbar:

  • auto (Mauszeiger wird automatisch vom System eingestellt)
  • default (Standard-Mauszeiger, Plattformunabhängig)
  • crosshair (Fadenkreuz)
  • pointer (Hand)
  • move (Mauszeiger mit vier Pfeilen)
  • n-resize (Pfeil nach oben)
  • ne-resize (Pfeil nach rechts oben)
  • e-resize (Pfeil nach rechts)
  • se-resize (Pfeil nach rechts unten)
  • s-resize (Pfeil nach unten)
  • sw-resize (Pfeil nach links unten)
  • w-resize (Pfeil nach links)
  • nw-resize (Pfeil nach links oben)
  • text (Textcursor)
  • wait (Sanduhr)
  • help (Fragezeichen)
  • url(); (Beliebiger Mauszeiger, sollte eine GIF- oder JPG-Grafik sein)
  • Inherit

Schreibe einen Kommentar

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

» «