Cara mengganti bentuk kursor mouse pada CSS
Pada CSS Anda bisa mengganti bentuk kursor mouse dengan properti cursor. Bentuk kursor mempunyai sebu
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 properti cursor. Bahkan Anda bisa mengganti bentuk kursor custom 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 properti cursor Anda bisa mengganti bentuk kursor.
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}Mengganti bentuk kursor dengan gambar
Mungkin sebagian orang ingin mempunyai bentuk kursor custom buatan sendiri, Dengan properti cursor dan value url("#url") Anda bisa mengganti kursor custom buatan Anda sendiri.
Pada url(“#”) Anda bisa memasukan alamat gambar kursor custom 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 custom tidak ditemukan maka cursor-generic lah yang akan digunakan.
p {
cursor: url(“https://tools.hendky.com/editor/gambar/abu.gif”), url(“https://tools.hendky.com/editor/gambar/hitam.gif”), default;
}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.