CSS-Cursor-Liste – alle Cursor-Werte mit Vorschau

Fahren Sie über eine Karte, um den Cursor auszuprobieren, und klicken Sie, um das CSS zu kopieren.

Ihre Texte und Dateien bleiben in Ihrem Browser – nichts wird an einen Server gesendet.

Fahren Sie mit der Maus über eine Karte, um zu diesem Cursor zu wechseln. Ein Klick kopiert die CSS-Zeile.

Allgemein

Links & Status

Auswahl

Drag & Drop

Größe ändern & Scrollen

Zoom

So funktioniert’s

  1. Fahren Sie über eine beliebige Karte, um den Cursor in Aktion zu sehen. Das genaue Aussehen unterscheidet sich je nach Betriebssystem und Browser etwas.
  2. Klicken Sie auf eine Karte, um „cursor: wert;“ zu kopieren, und fügen Sie es in Ihre CSS-Regel ein.
  3. Geben Sie unter „Suchen“ ein Wort wie resize oder move ein, um die Liste einzugrenzen.
  4. Smartphones und Tablets haben keinen Mauszeiger – sehen Sie sich die Vorschau daher am Computer an.

Häufige Fragen

Kann ich ein eigenes Bild als Cursor verwenden?

Ja: cursor: url(cursor.png) 4 4, pointer; – die beiden Zahlen legen den Hotspot fest (x y), und der Standardwert am Ende ist als Ausweichlösung Pflicht, falls das Bild nicht lädt. Das Bild sollte höchstens 32×32 px groß sein.

Wann nehme ich pointer und wann default?

Verwenden Sie pointer für alles, was sich anklicken lässt, etwa Links und Buttons, und default überall sonst. Ein pointer über etwas, das nicht klickbar ist, verwirrt die Nutzer.

grab wird in manchen Browsern nicht angezeigt.

Sehr alte Browser brauchten Präfixe wie -webkit-grab. Aktuelle Versionen von Chrome, Edge, Firefox und Safari unterstützen die Standardwerte grab und grabbing aber alle.

Ähnliche Tools

Alle Tools