Cara mengganti bentuk kursor mouse pada css

belajar css

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.

Contoh:

Editor Online
  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.

Contoh:

Editor Online
  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.

Leave a Reply

Your email address will not be published. Required fields are marked *