CSS/Eigenschaften/cursor

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft cursor ermöglicht es, beim Überfahren mit der Maus einen anderen Cursor anzuzeigen

Erlaubte Werte

(Fahren Sie mit der Maus über die jeweiligen Werte):

  • allgemeine Cursortypen
    • auto, automatischer Cursor (Voreinstellung)
    • default, plattformunabhängiger Standard-Cursor
    • none, kein Cursor
  • Cursortypen für Verweise und Statusangaben
    • pointer, Zeiger, signalisiert meist Verweise
    • help, signalisiert Hilfe zu dem Element
    • context-menu, signalisiert, dass ein Context-Menü erreichbar ist
    • all-scroll, signalisiert, dass der Inhalt eines Elements in jede Richtung scrollbar ist
    • wait, signalisiert einen Wartezustand
    • progress, signalisiert Hintergrundaktivität, lässt aber anders als wait eine Interaktion zu
  • Cursortypen für Auswahlen
    • text, für normalen, auswählbaren horizontalen Text
    • vertical-text, analog für vertikal ausgerichteten Text
    • crosshair, einfaches Fadenkreuz
    • cell, signalisiert eine Tabellenzelle
  • Cursortypen für drag and drop
    • alias, symbolisiert das Erstellen einer Verknüpfung
    • copy, symbolisiert das Erstellen einer Kopie
    • move, kennzeichnet das Verschieben des Elements
    • no-drop, zeigt an, dass hier kein Ablegen möglich ist
    • not-allowed, zeigt an, dass die gewünschte Aktion hier nicht erlaubt ist
  • Cursortypen, die symbolisieren, dass die Größe eines Elementes geändert werden kann
    • n-resize, Pfeil, der nach oben zeigt (n, Norden)
    • s-resize, Pfeil, der nach unten zeigt (s, Süden)
    • e-resize, Pfeil, der nach rechts zeigt (e, Osten)
    • w-resize, Pfeil, der nach links zeigt (w, Westen)
    • ne-resize, Pfeil, der nach rechts oben zeigt (ne, Nordost)
    • se-resize, Pfeil, der nach rechts unten zeigt (se, Südost)
    • nw-resize, Pfeil, der nach links oben zeigt (nw, Nordwest)
    • sw-resize, Pfeil, der nach links unten zeigt (sw, Südwest)
  • Cursortypen, die symbolisieren, dass die Größe eines Elementes in zwei Richtungen geändert werden kann
    • ns-resize, Doppelpfeil, der nach oben und unten zeigt
    • ew-resize, Doppelpfeil, der nach links und rechts zeigt
    • nesw-resize, Doppelpfeil, der nach rechtsoben und linksunten zeigt
    • nwse-resize, Doppelpfeil, der nach linksoben und rechtsunten zeigt
  • Cursortypen für bewegliche Zeilen- bzw. Spaltentrenner
    • col-resize, symbolisiert das Verändern der Spaltenbreite
    • row-resize, symbolisiert das Verändern der Zeilenhöhe
  • Cursortypen, die darstellen, dass der Inhalt eines Elementes vergrößert bzw. verkleinert werden kann
    • zoom-in, symbolisiert, dass der Inhalt eines Elementes vergrößert werden kann
    • zoom-out, symbolisiert, dass der Inhalt eines Elementes verkleinert werden kann
  • eine Grafik
    • url('cross.png'), not-allowed = Referenz auf die Grafik mit Alternativcursor
    • url('cross.png') 5 5, not-allowed = zusätzliche Festlegung des Hotspots
Vererbung steuernde Werte inherit, initial, unset und revert
Standardwert

auto

anwendbar auf

alle Elemente

Vererbung

ja

animierbar

ja

Beispiel
body { cursor: help; }
Anstelle des Standardcursors erscheint auf der gesamten Seite ein Cursor mit einem Fragezeichen.

Siehe auch

Weblinks