CSS Cursor: jeder Wert zum Ausprobieren, eigene Cursor, Opacity | We.Inc
Fahre über eine Kachel für jeden der 36 Standardwerte von CSS cursor, baue einen eigenen Bild-Cursor mit Hotspot und Fallback und lerne, wann du mit opacity, visibility oder rgba ausblendest.
Die Eigenschaft cursor legt den Mauszeiger fest, der über einem Element angezeigt wird, zum Beispiel cursor: pointer für klickbare Elemente, not-allowed für deaktivierte Steuerelemente und grab für ziehbare Elemente. Eigene Cursor nutzen url() mit einem Bild, optionalen Hotspot-Koordinaten und einem verpflichtenden Fallback-Schlüsselwort. Fahre über die Kacheln unten, um alle 36 Standardwerte in deinem Browser zu sehen.
Die Cursor, die du am häufigsten brauchst
Zustand
CSS
Tailwind
Link oder Button
cursor: pointer
Deaktiviertes Steuerelement
cursor: not-allowed
Ziehbar / wird gezogen
cursor: grab / grabbing
cursor-grab / cursor-grabbing
Bearbeitbarer Text
cursor: text
Spaltenbreite ändern
cursor: col-resize
Beschäftigt, aber bedienbar
cursor: progress
Cursor-Namen errät man leicht falsch, und jedes Betriebssystem zeichnet sie etwas anders. In dieser Galerie fährst du über jedes Schlüsselwort in deinem eigenen Browser. Danach siehst du, wie du einen eigenen Bild-Cursor baust, der trotzdem sauber auf einen Fallback zurückfällt, und dazu die passenden Opacity-Tricks für ausgeblendete und deaktivierte Zustände.
Fahre über eine Kachel in der Galerie, um den Cursor so zu sehen, wie dein System ihn zeichnet. Klicke auf eine Kachel, um ihre Deklaration zu kopieren.
Grenze die Liste mit dem Filter auf Links, Größenänderung, Ziehen oder Status-Cursor ein.
Öffne den Builder für eigene Cursor, passe den Hotspot an und teste das Ergebnis im Zielbereich.
Lies den Abschnitt zu Opacity, um zwischen opacity, visibility und rgba-Farben für Ausblendungen zu wählen.
Browser zeigen bei Links schon pointer an. Bei Buttons und anderen klickbaren Elementen musst du ihn selbst ergänzen, da Buttons standardmäßig den Pfeil zeigen.
Halte eigene Cursor-Bilder bei 32 mal 32 Pixel oder kleiner. Größere Bilder werden von manchen Browsern und Betriebssystemen ignoriert.
Beende eine Cursor-Liste immer mit einem Schlüsselwort wie auto oder pointer. Nach url()-Werten ist das Schlüsselwort Pflicht.
Touchscreens haben gar keinen Cursor. Verwende den Cursor deshalb nie als einziges Zeichen dafür, dass etwas interaktiv ist.
Häufige Fragen
Wie erstelle ich einen eigenen Cursor in CSS?
Schreibe cursor: url(cursor.svg) 4 4, auto; dabei ist das Bild eine kleine PNG-, SVG- oder CUR-Datei, die beiden Zahlen sind der Hotspot in Pixeln von oben links, und auto ist das Fallback-Schlüsselwort, falls das Bild nicht lädt. Du kannst mehrere url()-Bilder vor dem Schlüsselwort auflisten.
Welchen Cursor sollte ein deaktivierter Button zeigen?
not-allowed ist die übliche Wahl. Sprich ihn mit button:disabled { cursor: not-allowed; opacity: 0.5; } an und behalte das echte disabled-Attribut, damit auch Tastatur- und Screenreader-Nutzer erfahren, dass das Steuerelement nicht verfügbar ist, und nicht nur Mausnutzer.
Was ist der Unterschied zwischen opacity und visibility?
opacity blendet das ganze Element samt Kindelementen aus, und ein vollständig transparentes Element empfängt trotzdem Klicks und Fokus. visibility: hidden schaltet das Element für Zeiger und assistive Technologien ab, behält aber seinen Platz. Nutze opacity für das Ausblenden selbst und schalte visibility am Ende um, damit unsichtbare Elemente nicht anklickbar sind.
Warum macht opacity auch meinen Text transparent?
opacity wirkt auf alles innerhalb des Elements. Wenn nur der Hintergrund durchscheinen soll, verwende stattdessen eine halbtransparente Farbe: background-color: rgb(0 0 0 / 0.5) oder das ältere rgba(0, 0, 0, 0.5). Der Text bleibt dabei voll deckend.
Kann ich den Cursor ausblenden?
cursor: none blendet ihn über dem Element aus, was Spiele, Kiosksysteme und Videoplayer manchmal brauchen. Setze es auf normalen Websites sparsam ein, denn Menschen verlieren sonst den Überblick, wohin sie zeigen.
Cursor sind Hinweise, keine Steuerelemente
Der Cursor sagt Mausnutzern, was passiert, bevor sie klicken. Ein pointer verspricht ein Klickziel, ein Text-Cursor verspricht auswählbaren oder bearbeitbaren Text, und ein Größenänderungspfeil verspricht Ziehen. Ein pointer auf etwas, das nichts tut, ist ein gebrochenes Versprechen.
Tastatur-, Touch- und Screenreader-Nutzer sehen diese Hinweise nie. Interaktive Elemente müssen trotzdem interaktiv aussehen, einen sichtbaren Fokusstil haben und echte Buttons und Links sein, damit ihre Rolle angesagt wird.
Eigene Bild-Cursor, die nicht kaputtgehen
Ein Cursor-Bild wird wie jedes andere Bild geladen. Ein langsamer oder fehlgeschlagener Download lässt also das Fallback-Schlüsselwort stehen. Ein inline eingebettetes data:-SVG spart die Anfrage komplett und bleibt auf hochauflösenden Bildschirmen scharf.
Der Hotspot ist genau der Pixel, der klickt. Bei einem Pfeil ist das die Spitze, meist nahe 0 0; bei einem Fadenkreuz oder Kreis ist es die Mitte. Ein falscher Hotspot lässt Klicks ein paar Pixel neben dem Ziel landen.
Elemente richtig ausblenden
Für einen deaktivierten Look kombinierst du opacity um 0.5 mit cursor: not-allowed und dem disabled-Attribut. Prüfe, ob der ausgeblendete Text die Kontrastanforderungen noch erfüllt, wenn man ihn lesen können muss.
Für Einblendungen beim Hover animierst du opacity, weil das günstig zu rendern ist, und kombinierst es mit visibility, damit das Element im transparenten Zustand nicht klickbar ist. Eine Farbe mit Alphakanal ist das richtige Werkzeug, wenn nur eine Ebene, etwa Hintergrund oder Rahmen, durchscheinen soll.
Alle 36 Cursor-Werte
Standard-Schlüsselwörter für cursor (CSS Basic User Interface Level 4); Tailwind-Klassen sind cursor-<value>
Wert
Gruppe
Bedeutung
Allgemein
Der Browser entscheidet nach Kontext
Allgemein
Der Systempfeil
Allgemein
Kein Cursor sichtbar
Links und Status
Ein Kontextmenü ist verfügbar
Links und Status
Hilfe ist verfügbar
Links und Status
Ein Link oder klickbares Steuerelement
Links und Status
Beschäftigt, aber du kannst weiter interagieren
Links und Status
Beschäftigt, noch keine Interaktion möglich
Auswahl
Eine oder mehrere Tabellenzellen sind auswählbar
Auswahl
Präzise zweidimensionale Auswahl
Auswahl
Text ist auswählbar oder bearbeitbar
Auswahl
Vertikaler Text ist auswählbar
Drag and Drop
Eine Verknüpfung oder ein Alias wird erstellt
Drag and Drop
Etwas wird kopiert
Drag and Drop
Etwas wird verschoben
Drag and Drop
Hier kann nichts abgelegt werden
Drag and Drop
Die Aktion ist nicht erlaubt
Drag and Drop
Kann gegriffen und gezogen werden
Drag and Drop
Wird gerade gezogen
Größe und Scrollen
Scrollen in jede Richtung möglich
Größe und Scrollen
Spaltenbreite horizontal ändern
Größe und Scrollen
Zeilenhöhe vertikal ändern
Größe und Scrollen
Obere Kante verschieben
Größe und Scrollen
Rechte Kante verschieben
Größe und Scrollen
Untere Kante verschieben
Größe und Scrollen
Linke Kante verschieben
Größe und Scrollen
Obere rechte Ecke verschieben
Größe und Scrollen
Obere linke Ecke verschieben
Größe und Scrollen
Untere rechte Ecke verschieben
Größe und Scrollen
Untere linke Ecke verschieben
Größe und Scrollen
Größe nach links oder rechts ändern
Größe und Scrollen
Größe nach oben oder unten ändern
Größe und Scrollen
Größe entlang der steigenden Diagonale ändern
Größe und Scrollen
Größe entlang der fallenden Diagonale ändern
Zoom
Hineinzoomen möglich
Zoom
Herauszoomen möglich
Eigener Cursor mit Hotspot und Fallback
Inline-SVG-Ring-Cursor, zentriert auf seinem Hotspot
Der Hotspot 12 12 legt den Klick in die Mitte des Rings. crosshair wird verwendet, wenn das Bild nicht akzeptiert wird.
Zustände für Deaktiviert, Ziehen und Größenänderung
Cursor, die zur Interaktion passen
Fahre über jedes Element. Die ziehbare Karte wechselt zu grabbing, solange die Maustaste gedrückt ist.
opacity vs. visibility vs. rgba
Die richtige Art zum Ausblenden wählen
Technik
Betrifft Kindelemente?
Noch klickbar?
Weich animierbar?
Tailwind
opacity: 0.5
Ja, alles darin
Ja
Ja
visibility: hidden
Ja (Kindelemente können sich wieder einblenden)
Nein
Wechselt sofort
background: rgb(0 0 0 / 0.5)
Nein, nur diese Ebene
Ja
Ja
bg-black/50
color: rgb(17 17 17 / 0.6)
Nein, nur der Text
Ja
Ja
text-black/60
Opacity für das ganze Element neben einem halbtransparenten Hintergrund
Das linke Banner blendet seinen Text zusammen mit der Box aus. Das rechte behält scharfen Text über einem durchscheinenden Hintergrund.