Menukar Kursor dengan CSS - Jenis Kursor Tetikus dan Tetapan 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 =

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