Home › css › Cara mengganti bentuk kursor mouse pada css

Cara mengganti bentuk kursor mouse pada css

HendkyNovember 6, 2019( diperbaharui: 18-October-2020 ) 0

Share:

facebook

twitter

whatsapp

pinterest

linkedin

Kursor pada css

Pada CSS, bentuk kursor mempunyai sebuah makna dan keterangannya. Ada banyak sekali bentuk-bentuk kursor pada css dan Anda bisa mengganti bentuk kursor tersebut dengan property cursor. Bahkan Anda bisa mengganti bentuk kursor custome buatan sendiri. Tabel di bawah ini menunjukkan berbagai macam-macam kursor:

Tipe	Hasil	Keterangan
default		Kursor standar atau bawaan
pointer		Menunjukkan sebuah tautan
text		Menunjukkan sebuah teks
wait		Menunjukkan untuk menunggu
help		Menunjukkan bahwa bantuan tersedia
progress		Menunjukkan bahwa program sedang sibuk (sedang berlangsung)
crosshair		Menunjukan sedang merender
move		Menunjukkan ada sesuatu yang harus dipindahkan

Mengganti bentuk kursor

Dengan property cursor Anda bisa mengganti bentuk kursor.

1. .alias {cursor: alias;}
2. .all-scroll {cursor: all-scroll;}
3. .auto {cursor: auto;}
4. .cell {cursor: cell;}
5. .context-menu {cursor: context-menu;}
6. .col-resize {cursor: col-resize;}
7. .copy {cursor: copy;}
8. .crosshair {cursor: crosshair;}
9. .default {cursor: default;}
10. .e-resize {cursor: e-resize;}
11. .ew-resize {cursor: ew-resize;}
12. .grab {cursor: grab;}
13. .grabbing {cursor: grabbing;}
14. .help {cursor: help;}
15. .move {cursor: move;}
16. .n-resize {cursor: n-resize;}
17. .ne-resize {cursor: ne-resize;}
18. .nesw-resize {cursor: nesw-resize;}
19. .ns-resize {cursor: ns-resize;}
20. .nw-resize {cursor: nw-resize;}
21. .nwse-resize {cursor: nwse-resize;}
22. .no-drop {cursor: no-drop;}
23. .none {cursor: none;}
24. .not-allowed {cursor: not-allowed;}
25. .pointer {cursor: pointer;}
26. .progress {cursor: progress;}
27. .row-resize {cursor: row-resize;}
28. .s-resize {cursor: s-resize;}
29. .se-resize {cursor: se-resize;}
30. .sw-resize {cursor: sw-resize;}
31. .text {cursor: text;}
32. .w-resize {cursor: w-resize;}
33. .wait {cursor: wait;}
34. .zoom-in {cursor: zoom-in;}
35. .zoom-out {cursor: zoom-out;}

Mengganti bentuk kursor dengan gambar

Mungkin sebagian orang ingin mempunyai bentuk kursor custome buatan sendiri, Dengan property cursor dan value url("#url") Anda bisa mengganti kursor custome buatan Anda sendiri.

Pada url(“#”) Anda bisa memasukan alamat gambar kursor custome lebih dari satu, yang dipisahkan dengan koma dan jangan lupa masukan cursor-generic atau kursor default paling akhir, Ini berguna jika kursor pertama tidak ditemukan maka kursor berikutnya akan digunakan, dan jika kursor custome tidak ditemukan maka cursor-generic lah yang akan digunakan.

1. p {
2. cursor: url(“https://hendky.com/editor/gambar/abu.gif”), url(“https://hendky.com/editor/gambar/hitam.gif”), default;
3. }

Pada contoh diatas jika gambar kursor abu.gif tidak ditemukan maka kursor hitam.gif yang akan digunakan, dan jika keduanya tidak ditemukan maka cursor-generic lah yang akan digunakan.