Menukar Kursor dengan CSS - Jenis Kursor Tetikus dan Tetapan CSS

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でカーソルを変える

Menukar Kursor dengan CSS
= Jenis Kursor Tetikus dan Tetapan CSS =

Di halaman web, bentuk kursor tetikus atau penunjuk tetikus boleh diset menggunakan properti CSS "cursor".
Panduan ini meneroka nilai CSS untuk bentuk kursor yang berbeza dan cara untuk menyusunnya.
Anda boleh mengklik pada properti untuk menyalinnya. Halaman ini termasuk properti "cursor:copy" untuk elemen yang boleh disalin.
Gambar contoh disediakan untuk setiap properti. Walau bagaimanapun, bentuknya mungkin berbeza bergantung pada sistem pengendalian dan pelayar anda.
Apabila anda melayang ke atas bahagian "Pada Tetikus", anda boleh melihat kursor seperti yang muncul dalam persekitaran anda.

《Cara Menyusun》

Jika anda ingin mengaplikasikannya pada beberapa bahagian di halaman, amalan biasa adalah menulis berikut di bahagian <head> atau dalam fail CSS luaran.
".cursorstyle" adalah nama kelas tersuai.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Salin
Contoh mengaplikasikan CSS di atas menggunakan atribut "class".
<span class="cursorstyle">Teks</span> Salin

<div class="cursorstyle">Teks</div> Salin

<a class="cursorstyle">Teks</a> Salin
Contoh apabila mengaplikasikan pada satu bahagian atau beberapa elemen.
Gunakan atribut "style" dan tulis properti secara langsung.
<span style="cursor : pointer;">Teks</span> Salin

<div style="cursor : pointer;">Teks</div> Salin

《Jenis Penunjuk dan Nilai CSS》

Nilai CSS [Klik untuk Salin]	Contoh di OS [Boleh berbeza mengikut pelayar]		Mouse-Over Pratonton Bentuk	Penerangan
Nilai CSS [Klik untuk Salin]	Windows	Mac	Mouse-Over Pratonton Bentuk	Penerangan
auto cursor: auto;			《Mouse-Over》	Pelayar secara automatik menentukan penunjuk mengikut konteks
default cursor: default;			《Mouse-Over》	Memaparkan anak panah standard
none cursor: none			《Mouse-Over》	Tidak memaparkan penunjuk
context-menu cursor: context-menu			《Mouse-Over》	Membenarkan penggunaan menu konteks
help cursor: help			《Mouse-Over》	Item bantuan
pointer cursor: pointer			《Mouse-Over》	Apabila melayang di atas pautan, dll.
progress cursor: progress			《Mouse-Over》	Memproses tugas. Interaksi pengguna dibenarkan
wait cursor: wait			《Mouse-Over》	Memproses tugas. Interaksi pengguna tidak dibenarkan
cell cursor: cell			《Mouse-Over》	Sel jadual boleh dipilih
crosshair cursor: crosshair			《Mouse-Over》	Penunjuk silang, biasanya menunjukkan pemilihan pada bitmap
text cursor: text			《Mouse-Over》	Teks boleh dipilih
vertical-text cursor: vertical-text			《Mouse-Over》	Teks menegak boleh dipilih
alias cursor: alias			《Mouse-Over》	Boleh membuat alias atau pintasan
copy cursor: copy			《Mouse-Over》	Boleh disalin
move cursor: move			《Mouse-Over》	Boleh dipindahkan
no-drop cursor: no-drop			《Mouse-Over》	Tidak boleh dijatuhkan pada kedudukan tersebut
not-allowed cursor: not-allowed			《Mouse-Over》	Tindakan yang diminta tidak dapat dilaksanakan
grab cursor: grab			《Mouse-Over》	Boleh digeret, biasanya dipasangkan dengan grabbing
grabbing cursor: grabbing			《Mouse-Over》	Semasa seret, dipasangkan dengan grab
all-scroll cursor: all-scroll			《Mouse-Over》	Boleh menatal ke mana-mana arah
col-resize cursor: col-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi mendatar
row-resize cursor: row-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi menegak
n-resize cursor: n-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi ke arah utara (atas)
w-resize cursor: w-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi ke arah barat (kiri)
s-resize cursor: s-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi ke arah selatan (bawah)
e-resize cursor: e-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi ke arah timur (kanan)
nw-resize cursor: nw-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi ke arah barat laut (atas-kiri)
ne-resize cursor: ne-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi ke arah timur laut (atas-kanan)
sw-resize cursor: sw-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi ke arah barat daya (bawah-kiri)
se-resize cursor: se-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi ke arah timur daya (bawah-kanan)
ew-resize cursor: ew-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi mendatar dua hala
ns-resize cursor: ns-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi menegak dua hala
nesw-resize cursor: nesw-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi dalam arah timur laut-barat daya (atas-kanan & bawah-kiri)
nwse-resize cursor: nwse-resize			《Mouse-Over》	Kotak boleh diubah saiz dengan pergerakan tepi dalam arah barat laut-timur daya (atas-kiri & bawah-kanan)
zoom-in cursor: zoom-in			《Mouse-Over》	Boleh zum masuk
zoom-out cursor: zoom-out			《Mouse-Over》	Boleh zum keluar
URL	Mana-mana imej boleh ditetapkan sebagai penunjuk. Saiz imej terhad kepada 128 × 128px. Saiz imej contoh adalah 70 × 70px. 《Mouse-Over》 .cursorimg {cursor: url(image-path), auto;} Salin ".cursorimg" boleh jadi sebarang nama. <div {cursor: url(image-path), auto;}>Teks</div> Salin 《Sokongan Paparan Retina》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Salin

Menukar Kursor dengan CSS= Jenis Kursor Tetikus dan Tetapan CSS =

Menukar Kursor dengan CSS
= Jenis Kursor Tetikus dan Tetapan CSS =

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