CSS/Eigenschaften/Benutzeroberfläche/cursor

Sie können für ein HTML-Element das Aussehen des Mauscursors definieren. Wenn der Anwender mit der Maus über die Fläche fährt, die das Element einnimmt, nimmt der Mauszeiger die angegebene Gestalt an. Da Mauszeiger immer mit einer Bedeutung versehen sein sollten, ist es in der Praxis sinnvoll, solche Elemente etwa mit Hilfe von JavaScript Event-Handlern an ein Script zu binden, das bestimmte Befehle ausführt.

Cursortypen des Browsers

• 
• 
• 
• 
• 

Details: caniuse.com

• 
• 
• 
• 
• 

Details: caniuse.com

Beispiel

input[readonly] {cursor: not-allowed;}

Mit cursor: können Sie das Aussehen des Mauszeigers für den Fall definieren, dass der Anwender mit der Maus über den entsprechenden Bereich fährt. Folgende Angaben sind erlaubt:

• allgemeine Cursortypen
  • demo, auto, automatischer Cursor (Voreinstellung)
  • demo, default, plattformunabhängiger Standard-Cursor
  • demo, none, kein Cursor
  • inherit, erbt die Einstellung des Elternelementes
• Cursortypen für Verweise und Statusangaben
  • demo, pointer, Cursor in Form eines Zeigers, signalisiert meist Verweise
  • demo, help, Cursor in Form Symbols, das Hilfe zu dem Element signalisiert
  • demo, context-menu, Cursor signalisiert, dass ein Context-Menü erreichbar ist
  • demo, all-scroll, Cursor signalisiert, dass der Inhalt eines Elements in jede Richtung scrollbar ist
  • demo, wait, Cursor in Form eines Symbols, das einen Wartezustand signalisiert
  • demo, progress, Cursor in Form eines Symbols, das einen Programmfortschritt signalisiert, welcher aber anders als wait eine Interaktion zulässt
• Cursortypen für Auswahlen
  • demo, text, Cursor in einer Form, die normalen Text symbolisiert
  • demo, vertical-text, Cursor in einer Form, die vertikalen Text symbolisiert
  • demo, crosshair, Cursor in Form eines einfachen Fadenkreuzes
  • demo, cell, Cursor in einer Form, die Tabellenzellen symbolisiert
• Cursortypen für drag and drop
  • demo, alias, Cursor in einer Form, die das Erstellen einer Verknüpfung symbolisiert
  • demo, copy, Cursor in einer Form, die das Erstellen einer Kopie symbolisiert
  • demo, move, Cursor in Form, die das Element als beweglich kennzeichnet
  • demo, no-drop, Cursor in einer Form, die symbolisiert, dass das Element hier nicht „fallen gelassen“ werden kann
  • demo, not-allowed, Cursor in einer Form, die symbolisiert, dass die gewünschte Aktion nicht erlaubt ist
• Cursortypen, die symbolisieren, dass die Größe eines Elementes geändert werden kann
  • demo, n-resize, Cursor in Form eines Pfeils, der nach oben zeigt (n, Norden)
  • demo, s-resize, Cursor in Form eines Pfeils, der nach unten zeigt (s, Süden)
  • demo, e-resize, Cursor in Form eines Pfeils, der nach rechts zeigt (e, Osten)
  • demo, w-resize, Cursor in Form eines Pfeils, der nach links zeigt (w, Westen)
  • demo, ne-resize, Cursor in Form eines Pfeils, der nach rechts oben zeigt (ne, Nordost)
  • demo, se-resize, Cursor in Form eines Pfeils, der nach rechts unten zeigt (se, Südost)
  • demo, nw-resize, Cursor in Form eines Pfeils, der nach links oben zeigt (nw, Nordwest)
  • demo, sw-resize, Cursor in Form eines Pfeils, der nach links unten zeigt (sw, Südwest)
• Cursortypen, die symbolisieren, dass die Größe eines Elementes bidirektional geändert werden kann
  • demo, ns-resize, Cursor in Form eines Doppelpfeils, der nach oben und unten zeigt
  • demo, ew-resize, Cursor in Form eines Doppelpfeils, der nach links und rechts zeigt
  • demo, nesw-resize, Cursor in Form eines Doppelpfeils, der nach rechtsoben und linksunten zeigt
  • demo, nwse-resize, Cursor in Form eines Doppelpfeils, der nach linksoben und rechtsunten zeigt
• Cursortypen für bewegliche Zeilen- bzw. Spaltentrenner
  • demo, col-resize, Cursor in einer Form, die das Verändern der Spaltenbreite symbolisiert
  • demo, row-resize, Cursor in einer Form, die das Verändern der Zeilenhöhe symbolisiert
• Cursortypen, die symbolisieren, dass der Inhalt eines Elementes vergrößert bzw. verkleinert werden kann
  • demo, zoom-in, Cursor in einer Form, die symbolisiert, dass der Inhalt eines Elementes vergrößert werden kann
  • demo, zoom-out, Cursor in einer Form, die symbolisiert, dass der Inhalt eines Elementes verkleinert werden kann

Beachten Sie: Unbekannte Werte werden browserspezifisch interpretiert.

Hinweis

Cursor-Symbole sollten Sie nicht zweckentfremden. Wenn Sie beispielsweise cursor:move für ein Element benutzen, sollte dieses Element auch tatsächlich beweglich sein und wenn Sie cursor:help benutzen, erwartet der Anwender beim Anklicken des Bereichs, dass am Bildschirm ein Fenster oder ein Bereich mit einem Hilfetext erscheint.

eigene Grafiken

• 
• 
• 
• 
• 

Sie können auch eigene Bilddateien als Mauszeiger definieren.

Beispiel ansehen …

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mauscursor mit Grafikdatei</title>
    <style>

      #ja   { cursor: url(tick.png),  url(tick.gif),  url(tick.cur),  auto; }
      #nein { cursor: url(cross.png), url(cross.gif), url(cross.cur), auto; }

    </style>
  </head>
  <body>
    <h1>Beispiel für eigene Mauscursor</h1>
    <div>
      <p>Ich stimme den AGB zu.</p>
      <button id="ja">Ja</button>
      <button id="nein">Nein</button>
    </div>
  </body>
</html>

Beachten Sie: Die Angabe einer alternativen Cursorform ist zwingend.

ansehen …

Sie können, ähnlich wie bei Schriftarten, mehrere externe Grafiken auflisten. Steht eine Grafik nicht zur Verfügung oder unterstützt der Browser das Format nicht, so wird die nächste Grafik (und schließlich die Alternative) verwendet.

Beachten Sie: Nicht alle Browser unterstützen alle Grafikformate und auch nicht unter allen Betriebssystemen. Eine Seite, auf der Sie konkret für Ihren Browser testen können, ob ein gewünschtes Grafikformat unterstützt wird, finden Sie unter http://selfhtml.apsel-mv.de/cursor/cursor.html.

• 

Sie können zudem für jede der Grafiken festlegen, welches die exakten Koordinaten des Mauszeigers sein sollen. Wichtig ist das vor allem bei Präzisionsauswahlen.

Beispiel

element { cursor: url('cross.png') 8 8, auto; }

Die beiden Angaben sind ganze Zahlen. Sie referenzieren die exakte Cursorposition, den sogenannten hot spot, relativ zu den Abmessungen der Cursorgrafik. Der erste Wert stellt dabei den Abstand vom linken Rand, der zweite den vom oberen Rand dar. Hier gemachte Angaben überschreiben gegebenenfalls die Festlegung in der Cursor-Datei selbst. Fehlen diese Angaben, werden die Werte aus der Cursor-Datei verwendet, fehlen auch diese, so werden beide Werte mit 0 initialisiert.

siehe auch

Referenz: cursor