Biasanya, saat membuka halaman web, kursor mouse akan berubah bentuk mengikuti elemen apa yang ditunjuk. Misalnya, saat menunjuk tulisan, maka kursor berubah dari bentuk panah menjadi bentuk I-beam. Dan saat menunjuk tombol, kursor berubah menjadi bentuk tangan menunjuk.
Kursor ini bisa diubah sesuka hati dengan menggunakan properti CSS cursor.
Sebagai contoh, coba arahkan kursor ke kotak biru di bawah ini. Kursor akan berubah menjadi bentuk tambah (crosshair).
<div style="cursor: crosshair; padding: 50px 0; background: #00AAD4; color: #fff; text-align: center;">
Arahkan kursor ke kotak ini
</div>Bagian terpenting dari kode di atas adalah cursor: crosshair;.
Selain crosshair, ada banyak pilihan kursor yang bisa digunakan:
auto | none | url | default |
pointer | text | progress | wait |
copy | context-menu | help | alias |
grab | grabbing | no-drop | not-allowed |
cell | crosshair | zoom-in | zoom-out |
n-resize | e-resize | s-resize | w-resize |
nw-resize | ne-resize | se-resize | sw-resize |
ns-resize | ew-resize | nwse-resize | nesw-resize |
row-resize | col-resize | all-scroll | move |
Menggunakan kursor buatan sendiri
Selain menggunakan kursor bawaan sistem, kita juga bisa menggunakan kursor buatan sendiri dengan menyetel CSS cursor: url();. Untuk contoh, mari gunakan gambar pencil.png berikut ini sebagai kursor:
cursor: url('pencil.png') 17 55, auto;Jika menggunakan kursor buatan sendiri, selain menyebutkan URL gambar, kita juga harus menyertakan kursor alternatif jika gambar kursor gagal dimuat. Untuk contoh ini, kita set alternatifnya dengan kursor auto (otomatis tergantung jenis tag elemen).
Angka 17 55 di atas adalah posisi hotspot dari kursor, yaitu titik klik pada gambar kursor. Gambar pensil yang kita punya berukuran 64×64 piksel, dan nilai 17 55 berarti 17 piksel dari kiri dan 55 piksel dari atas, yaitu tepat pada ujung runcing pensil.
Referensi:
Koleksi gambar kursor dari Suru (CC-BY-SA 4.0)