CURSOR-Anweisung in CSS
[Materialsammlung]
Bedeutung
Mittels CSS-Anweisungen lässt sich das Aussehen des Mauszeigers für HTML-Elemente verändern. Dies kann theoretisch zum Verständnis der Bedeutung des jeweiligen Elements beitragen.
Allerdings handelt es sich dabei um Symbolgrafiken, die bekannt oder intuitiv verständlich sein sollten. Davon kann nicht unbedingt ausgegangen werden, weshalb deren Einsatz keine unnötige Liebesmüh werden darf. Einzig der Mauszeiger für Hilfsangebote erscheint öfter auf Webseiten und verfügt daher möglicherweise über einen gewissen Bekanntheitsgrad. Auch die Richtungszeiger zum Verschieben eines Randes dürfte bekannt sein und ist bei richtigem Einsatz auch ziemlich intuitiv verständlich.
Für Menschen, die ohne Maus im Web arbeiten, sind angepasste Mauszeiger gänzlich unnötig und uninteressant.
Verfügbare Cursorvarianten
Um das Aussehen des jeweiligen Mauscursors in deinem aktuellen Browser anzusehen, führe die Maus auf die Spalte Aussehen
.
| Wert | Bedeutung | Aussehen |
|---|---|---|
| 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 Norwest | |
| 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) | |
| URL | Linkliste | |
| 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 |
Browserunterstützung
Die von mir getesteten Browser (IE10, MF41) unterstützen die verfügbaren Cursor-Anzeigen nicht vollstädnig.
Probleme mit großen Mauszeigern
Betriebssysteme und Vergrößerungsprogramme erlauben es, Mauscursors 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.
Ich kenne leider keine andere Lösung dieses Problems, als auf die Vergrößerung des Mauszeigers zu verzichten.
Vielleicht kennt aber jemand eine Lösung und schickt sie mir? Denkbar wären etwa Mauszeiger, die nicht von rechts unten, sonder von links oder oben auf das Element zeigen.