cursor
CSS-Anweisung für Mauszeiger
(Materialsammlung)
Zuletzt geändert:
Beim Überstreichen eines Elements mit der Maus ändert sich gelegentlich die Darstellung des Mauszeigers. Der jeweilige Mauszeiger dient dabei als visueller Indikator für die Eigenart des Elements und die mögliche Aktion, die mit der Maus ausgelöst werden kann. Typische Aktionen sind das Aktivieren von Steuerelementen oder das Markieren von Text.
Mittels CSS-Anweisungen lässt sich das Aussehen des Mauszeigers für HTML-Elemente verändern.
Probiere es aus
Die visuelle Darstellung des Mauszeigers ändert sich normalerweise beim Wechsel von Textkomponenten zu Steuerelementen. Beim Überstreichen von Links wird vom Browser typischerweise eine Hand eingeblendet. Über einen Schalter erscheint hingegen gewöhnlich ein Pfeil.
Du kannst im folgenden Beispiel die Cursoreffekte in deinem aktuell verwendeten Browser testen Bewege dazu die Maus über die unterschiedlichen Elemente.
Ich bin ein Text.
Verwendung
Aus Gründen der Wiedererkennbarkeit ist vom Ändern der Darstellung von Mauszeigern in der Regel abzuraten. Visuelle Indikatoren sollten im eigenen Browser auf unterschiedlichen Webauftritten gleich aussehen.
Auf Grund von Mängeln in der Standarddarstellung von Browsern kann eine cursor-Anweisung jedoch zweckmäßig sein. Beispielsweise sollte in einer Komponente mit einem Ausklappmechanismus das Steuerelement zum Öffnen mit einem Pfeil als Indikator versehen werden.
Standardwerte
Um das Aussehen des jeweiligen Mauszeiger in deinem aktuellen Browser anzusehen, führe die Maus auf die Spalte Darstellung.
| Wert | Bedeutung | Darstellung |
|---|---|---|
| alias | Alias erstellbar | |
| all-scroll | Scrollen in alle Richtungen | |
| auto | Standardeinstellung des Browsers | |
| cell | Zellen auswählen | |
| context-menu | Kontextmenü verfügbar | |
| col-resize | Spaltenbreite ändern | |
| copy | Kopieren | |
| crosshair | Fadenkreuz | |
| default | Standardeinstellung | |
| e-resize | Horizontal bewegen | |
| ew-resize | Verschieben in eine Richtung | |
| grab | Auswählen | |
| grabbing | Auswählbar | |
| help | Hilfe verfügbar | |
| move | Bewegen! | |
| n-resize | Vertikal bewegen | |
| ne-resize | Nach rechts oben bewegen (North-East) | |
| nesw-resize | In zwei Richtungen verändern | |
| ns-resize | Vertikal veränderbar (Nord-Süd) | |
| nw-resize | Veränderbar nach Nordwest | |
| nwse-resize | Veränderbar von Nordwest nach Südost | |
| no-drop | Kein Drop-Down ist hier möglich | |
| none | Kein Cursor verfügbar | |
| not-allowed | Aktion nicht verfügbar | |
| pointer | Zeiger auf ein Link | |
| progress | Programm in Arbeit | |
| row-resize | Reihe vertikal veränderbar | |
| s-resize | Nach unten verschiebbar | |
| se-resize | Nach rechts-unten verschiebbar (Süd-Ost) | |
| sw-resize | Nach links unten verschiebbar (süd-west) | |
| text | Text auswählen oder Bearbeiten (Textcursor) | |
| vertical-text | Vertikalen Text wählen | |
| w-resize | Rand nach links verändern (West) | |
| wait | Bitte warten! | |
| zoom-in | Vergrößern | |
| zoom-out | Verkleinern | |
| initial | Standardwert wiederherstellen. | |
| inherit | Einstellung vom übergeordneten Element übernehmen |
Probleme mit großen Mauszeigern
Betriebssysteme und Vergrößerungsprogramme erlauben es, Mauszeiger zu vergrößern, damit sie besser sichtbar werden. Leider führt das oft dazu, dass der Text eines vorhandenen TITLE-Attributs beim Überstreichen mit der Maus vom Mauszeiger überlagert und dadurch schwerer lesbar wird.