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

Table of Contents - いろいろ Tips - 目次: Sitemap Generator - サイトマップ生成プログラム

In-Page Search - 検索を自ページ設置

Download Counter - ダウンロードカウンター

Draft Manager - ブラウザで下書き保存

Text Encryption - テキスト暗号・復号化

CSS & JavaScript - 圧縮・整形/復元ツール

Simple Yet Powerful Note Tool - メモメモ

Task Management - 仕事/やること管理

Local Storage Check - ローカルストレージチェック

Pixel Art - ピクセルアート作成

Freehand Drawing - フリーハンドドローイング

Pomodoro Timer - ポモドーロタイマー

Text Counter - 文字数カウント

Notepad - メモ帳

原稿用紙エディター

俳句・短歌下書きツール

ウィンドウサイズ

インターネット環境

タブを再び開く

Webページ最新状態

ページ内文字検索

スマホページ内検索

画像を加工する

Macでカラーコードを調べ

Mac用解凍ソフト

ショートカット

コピペの方法

右クリック禁止を回避

ローマ字かな入力変換表

ひらがな→ヘボン式ローマ字変換

ウェブページで長音ローマ字

ファイル差分チェック

音声合成

テキスト読み上げ

テキスト読み上げ書き方

全国公衆電話の場所

よく使う記号

キーボードの記号

キーボードの記号と入力方法

操作で使うキーの名称

CSSでカーソルを変える

Ä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 =

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