Cursor adalah panah yang ketika mouse atau touchpad kamu arahin, nanti anak panahnya juga ikut bergerak.
Mouse secara default tampilannya ya anak panah, dan tangan telunjuk untuk link.
Tapi, kamu bisa sebenarnya mengkustom tampilan cursor sendiri. Dulu ketika saya masih seneng aneh-aneh juga melakukan ini ehehe.
Property
Untuk mengganti tampilan cursor, kamu tinggal menambahkan properti cursor:;, contoh:
p {cursor: wait;}
coba mousenya diarahin ke paragraf ini. Nanti tampilannya ganti tampilan loading.
Value
Berikut ini tampilan cursor yang bisa kamu pilih:
| Value | Tampilan | Contoh |
|---|---|---|
context-menu |  | Ini contoh pakai context-menu |
help |  | Ini contoh pakai help |
pointer |  | Ini contoh pakai pointer |
progress |  | Ini contoh pakai progress |
wait |  | Ini contoh pakai wait |
cell |  | Ini contoh pakai cell |
crosshair |  | Ini contoh pakai crosshair |
text |  | Ini contoh pakai text |
vertical-text |  | Ini contoh pakai vertical-text |
alias |  | Ini contoh pakai alias |
copy |  | Ini contoh pakai copy |
move |  | Ini contoh pakai move |
no-drop |  | Ini contoh pakai no-drop |
not-allowed |  | Ini contoh pakai not-allowed |
all-scroll |  | Ini contoh pakai all-scroll |
col-resize |  | Ini contoh pakai col-resize |
row-resize |  | Ini contoh pakai row-resize |
n-resize |  | Ini contoh pakai n-resize |
e-resize |  | Ini contoh pakai e-resize |
s-resize |  | Ini contoh pakai s-resize |
w-resize |  | Ini contoh pakai w-resize |
ne-resize |  | Ini contoh pakai ne-resize |
nw-resize |  | Ini contoh pakai nw-resize |
se-resize |  | Ini contoh pakai se-resize |
sw-resize |  | Ini contoh pakai sw-resize |
ew-resize |  | Ini contoh pakai ew-resize |
ns-resize |  | Ini contoh pakai ns-resize |
nesw-resize |  | Ini contoh pakai nesw-resize |
nwse-resize |  | Ini contoh pakai nwse-resize |
zoom-in |  | Ini contoh pakai zoom-in |
zoom-out |  | Ini contoh pakai zoom-out |
grab |  | Ini contoh pakai grab |
grabbing |  | Ini contoh pakai grabbing |
Custom cursor
Kamu juga bisa tuh untuk mengcustom sendiri tampilan. Value propertinya menjadi cursor: url("gambar.gif"), url("gambar.cur"), default;
Jadi, supaya lebih aman kamu mendefinisikan icon dalam 2 format gambar (jadi ada 2 file image yang dipanggil).
Satunya format .gif, satunya lagi format .cur. Kamu bisa menkonversi dengan cur converter online.