Ändern des Cursors mit CSS - Arten von Maus-Cursorn und CSS-Einstellungen

Ändern des Cursors mit CSS
= Arten von Maus-Cursorn und CSS-Einstellungen =

Auf einer Webseite kann die Form des Mauszeigers oder Mauszeigers mit der CSS-Eigenschaft "cursor" festgelegt werden.
Dieser Leitfaden untersucht die CSS-Werte für verschiedene Cursor-Formen und wie man sie konfiguriert.
Sie können auf die Eigenschaften klicken, um sie zu kopieren. Diese Seite enthält die Eigenschaft "cursor:copy" für kopierbare Elemente.
Beispielbilder werden für jede Eigenschaft bereitgestellt. Die Form kann jedoch je nach Ihrer Betriebssystemversion und Ihrem Browser abweichen.
Wenn Sie mit der Maus über die "On Mouse"-Sektionen fahren, können Sie den Cursor in Ihrer Umgebung sehen.

《So wird es eingestellt》

Wenn Sie es auf mehreren Abschnitten auf einer Seite anwenden möchten, ist es gängige Praxis, Folgendes im <head>-Abschnitt oder in einer externen CSS-Datei zu schreiben.
".cursorstyle" ist ein benutzerdefinierter Klassenname.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Kopieren
Beispiel für die Anwendung der oben genannten CSS mit dem "class"-Attribut.
<span class="cursorstyle">Text</span> Kopieren

<div class="cursorstyle">Text</div> Kopieren

<a class="cursorstyle">Text</a> Kopieren
Beispiel, wenn es auf einen einzelnen Abschnitt oder einige Elemente angewendet wird.
Verwenden Sie das "style"-Attribut und schreiben Sie die Eigenschaft direkt.
<span style="cursor : pointer;">Text</span> Kopieren

<div style="cursor : pointer;">Text</div> Kopieren

《Cursor-Typen und CSS-Werte》

CSS-Werte [Zum Kopieren klicken]	Beispiel im Betriebssystem [Kann je nach Browser variieren]		Mauszeiger-Vorschau	Beschreibung
CSS-Werte [Zum Kopieren klicken]	Windows	Mac	Mauszeiger-Vorschau	Beschreibung
auto cursor: auto;			《Mouse-Over》	Der Browser bestimmt den Cursor automatisch basierend auf dem Kontext
default cursor: default;			《Mouse-Over》	Zeigt einen Standardpfeil an
none cursor: none			《Mouse-Over》	Zeigt keinen Cursor an
context-menu cursor: context-menu			《Mouse-Over》	Ermöglicht die Nutzung eines Kontextmenüs
help cursor: help			《Mouse-Over》	Hilfselement
pointer cursor: pointer			《Mouse-Over》	Beim Überfahren eines Links usw.
progress cursor: progress			《Mouse-Over》	Aufgabe wird verarbeitet. Benutzerinteraktion möglich
wait cursor: wait			《Mouse-Over》	Aufgabe wird verarbeitet. Benutzerinteraktion nicht möglich
cell cursor: cell			《Mouse-Over》	Wählbare Tabellenzelle
crosshair cursor: crosshair			《Mouse-Over》	Fadenkreuz-Cursor, oft zur Auswahl auf Bitmaps verwendet
text cursor: text			《Mouse-Over》	Wählbarer Text
vertical-text cursor: vertical-text			《Mouse-Over》	Wählbarer vertikaler Text
alias cursor: alias			《Mouse-Over》	Kann ein Alias oder eine Verknüpfung erstellen
copy cursor: copy			《Mouse-Over》	Kopierbar
move cursor: move			《Mouse-Over》	Beweglich
no-drop cursor: no-drop			《Mouse-Over》	Kann an dieser Position nicht abgelegt werden
not-allowed cursor: not-allowed			《Mouse-Over》	Die gewünschte Aktion kann nicht ausgeführt werden
grab cursor: grab			《Mouse-Over》	Ziehen möglich, normalerweise mit grabbing kombiniert
grabbing cursor: grabbing			《Mouse-Over》	Während des Ziehens, kombiniert mit grab
all-scroll cursor: all-scroll			《Mouse-Over》	Kann in jede Richtung scrollen
col-resize cursor: col-resize			《Mouse-Over》	Größe veränderbares Feld mit horizontaler Kantenbewegung
row-resize cursor: row-resize			《Mouse-Over》	Größe veränderbares Feld mit vertikaler Kantenbewegung
n-resize cursor: n-resize			《Mouse-Over》	Größe veränderbares Feld mit Kantenbewegung nach Norden (oben)
w-resize cursor: w-resize			《Mouse-Over》	Größe veränderbares Feld mit Kantenbewegung nach Westen (links)
s-resize cursor: s-resize			《Mouse-Over》	Größe veränderbares Feld mit Kantenbewegung nach Süden (unten)
e-resize cursor: e-resize			《Mouse-Over》	Größe veränderbares Feld mit Kantenbewegung nach Osten (rechts)
nw-resize cursor: nw-resize			《Mouse-Over》	Größe veränderbares Feld mit Kantenbewegung nach Nordwesten (oben links)
ne-resize cursor: ne-resize			《Mouse-Over》	Größe veränderbares Feld mit Kantenbewegung nach Nordosten (oben rechts)
sw-resize cursor: sw-resize			《Mouse-Over》	Größe veränderbares Feld mit Kantenbewegung nach Südwesten (unten links)
se-resize cursor: se-resize			《Mouse-Over》	Größe veränderbares Feld mit Kantenbewegung nach Südosten (unten rechts)
ew-resize cursor: ew-resize			《Mouse-Over》	Größe veränderbares Feld mit bidirektionaler horizontaler Kantenbewegung
ns-resize cursor: ns-resize			《Mouse-Over》	Größe veränderbares Feld mit bidirektionaler vertikaler Kantenbewegung
nesw-resize cursor: nesw-resize			《Mouse-Over》	Größe veränderbares Feld mit Kantenbewegung in Nordost-Südwest-Richtung (oben rechts & unten links)
nwse-resize cursor: nwse-resize			《Mouse-Over》	Größe veränderbares Feld mit Kantenbewegung in Nordwest-Südost-Richtung (oben links & unten rechts)
zoom-in cursor: zoom-in			《Mouse-Over》	Kann hineinzoomen
zoom-out cursor: zoom-out			《Mouse-Over》	Kann herauszoomen
URL	Jedes Bild kann als Cursor gesetzt werden. Die Bildgröße ist auf 128 × 128px begrenzt. Die Beispielbildgröße beträgt 70 × 70px. 《Mouse-Over》 .cursorimg {cursor: url(image-path), auto;} Kopieren ".cursorimg" kann beliebig benannt werden. <div {cursor: url(image-path), auto;}>Text</div> Kopieren 《Retina-Display-Unterstützung》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Kopieren

Ändern des Cursors mit CSS= Arten von Maus-Cursorn und CSS-Einstellungen =

Ändern des Cursors mit CSS
= Arten von Maus-Cursorn und CSS-Einstellungen =

おすすめサイト・関連サイト…