Trick # 464 | Dieser Beitrag beinhaltet 8046 Wörter. – Geschätzte Lesezeit: ca. 41 Minuten.
Der Mauszeiger kann auf unterschiedlichste Arten dargestellt werden. Zumeist erkennen Webbrowser die gerade benötigte Darstellung von alleine. Wenn Sie nachhelfen müssen – oder eine andere Darstellung erzwingen wollen, – bedarf es eines Eingriffs. Immerhin ist das sehr einfach.
Die Darstellungssteuerung des Mauszeigers geschieht via CSS-Code. In der Folge das Beispiel für eine Mauszeigerdarstellung mit «grab». Den gewünschten Code können Sie sich unten aussuchen und ins CSS-Stylesheet Ihrer Website (in WordPress unter Design/Customizer/Zusätzliches CSS) kopieren:
p {
cursor: grab;
}In der Folge die Darstellungsmöglichkeiten des Mauszeigers. In den Codes wird jeweils das Element «p» (also ein Paragraph) angesprochen. Dieses Element müssen Sie freilich bei Bedarf ändern.
Testfeld «alias»-Cursor
Ein geschwungener Pfeil zeigt an, dass hier etwas erzeugt werden kann.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «alias»-Cursor:
p {
cursor: alias;
}Testfeld «all-scroll»-Cursor
kann in alle Richtungen gescrollt werden.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «all-scroll»-Cursor:
p {
cursor: all-scroll;
}Testfeld «auto»-Cursor
ist die Voreinstellung und überlässt dem Browser die Darstellung des Mauszeigers.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «auto»-Cursor:
p {
cursor: auto;
}Testfeld «cell»-Cursor
Zelle kann gewählt werden: weisses Plus mit schwarzem Rahmen.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «cell»-Cursor:
p {
cursor: cell;
}Testfeld «context-menu»-Cursor
Ein Pfeil mit einem kleinen Icon für ein Menü zeigt an, dass hier ein Kontextmenü verfügbar ist.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «context-menu»-Cursor:
p {
cursor: context-menu;
}Testfeld «crosshair»-Cursor
stellt den Mauszeiger als grosses dünnes Pluszeichen dar.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «crosshair»-Cursor:
p {
cursor: crosshair;
}Testfeld «default»-Cursor
überlässt dem Browser die Darstellung des Mauszeigers.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «default»-Cursor:
p {
cursor: default;
}Testfeld «grab»-Cursor
Zeigt mit einer offenen Hand an, dass hier etwas gepackt werden kann.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «grab»-Cursor:
p {
cursor: grab;
}Testfeld «grabbing»-Cursor
Die packende Hand greift zu, während die Maustaste gehalten und gezogen wird.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «grabbing»-Cursor:
p {
cursor: grabbing;
}Testfeld «help»-Cursor
stellt den Mauszeiger als Fragezeichen oder Ball dar.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «help»-Cursor:
p {
cursor: help;
}Testfeld «move»-Cursor
betont, dass etwas bewegt werden soll. Üblicherweise ist der Mauszeiger ein Kreuz mit Pfeilen an allen vier Enden.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «move»-Cursor:
p {
cursor: move;
}Testfeld «none»-Cursor
Kein Mauszeiger: Der Mauszeiger verschwindet und taucht erst wieder auf, wenn die Maus ausserhalb des Bereichs bewegt wird.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «none»-Cursor:
p {
cursor: none;
}Testfeld «not-allowed»-Cursor
Verboten – ein Kreis mit einem diagonalen Durchstrich zeigt an, dass hier eine Aktion nicht erlaubt ist.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «not-allowed»-Cursor:
p {
cursor: not-allowed;
}Testfeld «no-drop»-Cursor
wie not-allowed: Ein durchgestrichener Kreis zeigt an, dass hier keine drop-Region liegt.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «no-drop»-Cursor:
p {
cursor: no-drop;
}Testfeld «pointer»-Cursor
stellt den Mauszeiger als Pfeil oder als Händchen mit Zeigefinger dar.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «pointer»-Cursor:
p {
cursor: pointer;
}Testfeld «progress»-Cursor
ist ein Fortschritts-Indikator. Das Programm führt eine Aufgabe durch, aber im Gegensatz zur Anzeige «wait» kann der/die BenutzerIn weiter arbeiten.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «progress»-Cursor:
p {
cursor: progress;
}Testfeld «e-resize»-Cursor
stellt den Mauszeiger als Pfeil dar, der nach rechts (east) weist.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «e-resize»-Cursor:
p {
cursor: e-resize;
}Testfeld «n-resize»-Cursor
stellt den Mauszeiger als Pfeil dar, der nach oben (north) weist.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «n-resize»-Cursor:
p {
cursor: n-resize;
}Testfeld «ne-resize»-Cursor
stellt den Mauszeiger als Pfeil dar, der nach rechts oben (north-east) weist.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «ne-resize»-Cursor:
p {
cursor: ne-resize;
}Testfeld «nw-resize»-Cursor
stellt den Mauszeiger als Pfeil dar, der nach links oben (north-west) weist.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «nw-resize»-Cursor:
p {
cursor: nw-resize;
}Testfeld «s-resize»-Cursor
stellt den Mauszeiger als Pfeil dar, der nach unten (south) weist.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «s-resize»-Cursor:
p {
cursor: s-resize;
}Testfeld «se-resize»-Cursor
stellt den Mauszeiger als Pfeil dar, der nach rechts unten (south-east) weist.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «se-resize»-Cursor:
p {
cursor: se-resize;
}Testfeld «sw-resize»-Cursor
stellt den Mauszeiger als Pfeil dar, der nach links unten (south-west) weist.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «sw-resize»-Cursor:
p {
cursor: sw-resize;
}Testfeld «w-resize»-Cursor
stellt den Mauszeiger als Pfeil dar, der nach links (west) weist.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «w-resize»-Cursor:
p {
cursor: w-resize;
}Testfeld «text»-Cursor
stellt den Mauszeiger als «|» dar, mit dem Text gekennzeichnet und eingefügt wird.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «text»-Cursor:
p {
cursor: text;
}Testfeld «vertical-text»-Cursor
Vertikalen Text einfügen
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «vertical-text»-Cursor:
p {
cursor: vertical-text;
}Testfeld «wait»-Cursor
stellt den Mauszeiger üblicherweise als Sanduhr oder Uhr dar, um anzuzeigen, dass der Benutzer noch auf die Bearbeitung eines Prozesses warten muss.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «wait»-Cursor:
p {
cursor: wait;
}Testfeld «zoom-in»-Cursor
Eine Lupe mit Plus-Symbol zeigt an, dass sich der Inhalt einzoomen lässt.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «zoom-in»-Cursor:
p {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}Testfeld «zoom-out»-Cursor
Eine Lupe mit Minus-Symbol zeigt an, dass sich der Inhalt auszoomen lässt.
Tipp: Bewegen Sie den Mauszeiger über das Testfeld, um den Effekt zu sehen.
CSS-Code «zoom-out»-Cursor:
p {
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}Werbung
Werbung
