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.