Cara Mengganti Bentuk Kursor Mouse Di CSS

Sintaks css memungkinkan kita untuk dapat mengubah atau mengganti bentuk kursor mouse di css dengan mudah sesuai keinginan. Nah, dalam tutorial ini kita akan membahas bagaimana cara mengganti bentuk kursor mouse di css dengan berbagai macam bentuk yang nantinya bisa digunakan untuk website anda.

Kursor adalah pointer yang digunakan sebagai alat input secara visual, atau dapat digunakan sebagai alat bantu untuk menunjuk atau memilih berkas lokasi atau file yang ingin kita gunakan. Secara bawaan bentuk kursor seperti anak panah menghadap keatas, nah di css ini kita dapat dengan mudah sekali untuk mengantinya.

Mengganti Bentuk Kursor Mouse Di CSS

Untuk dapat mengganti bentuk kursor mouse di css ini kita menggunakan properti cursor, yang nantinya properti cursor ini memiliki banyak macam bentuk pointer atau kursor mouse yang bisa digunakan. Berikut ini daftar kursor mouse atau pointer mouse.

Nilai Keterangan
auto Bentuk kursor pointer mouse secara auto tergantung elemen tersebut, apakah sebuah teks atau link yang nantinya akan menyesuaikan bentuknya sendiri
crosshair Kursor mouse akan berbentuk crosshair atau tanda plus
default Kursor mouse akan berbentuk anak panah
pointer Kursor mouse akan berbentuk jari telunjuk
move Kursor mouse akan berbentuk anak panah empat arah untuk memindahkan elemen
e-resize Kursor mouse akan berbentuk anak panah dua arah secara horizontal
ne-resize Kursor mouse akan berbentuk anak panah dua arah miring ke kanan atas
nw-resize Kursor mouse akan berbentuk anak panah dua arah miring ke kiri atas
n-resize Kursor mouse akan berbentuk anak panah dua arah vertical
se-resize Kursor mouse akan berbentuk anak panah dua arah miring ke kiri atas
sw-resize Kursor mouse akan berbentuk anak panah dua arah miring ke kanan atas
s-resize Kursor mouse akan berbentuk anak panah dua arah vertical
w-resize Kursor mouse akan berbentuk anak panah dua arah secara horizontal
text Kursor mouse akan berbentuk simbol “I” untuk melakukan blok teks
wait Kursor mouse akan berbentuk seperti loading
help Biasanya kursor akan berbentuk anak panah dengan ada tanda tanya disampingnya
(url) Untuk dapat mengubah kursor ke gambar
Baca juga:  Pengertian Selector Css

Nah jika sudah menyiapkan bentuk-bentuk diatas mari kita coba dengan sintaks css dan silahkan gunakan satu persatu bentuk-bentuk kursor diatas, berikut ini contoh source-code untuk merubah bentuk kursor mouse di css.

<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:move">Move</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:text">text</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>

Agar kursor dapat berubah bentuk silahkan arahkan mouse ke teks-teks diatas untuk dapat melihat apakah sudah berkerja dengan benar atau belum.

Cara Mengganti Bentuk Kursor Di CSS Dengan Gambar

Bentuk-bentuk kursor bawaan meskipun kita dapat merubahnya, mungkin bagi sebagian orang kurang puas dengan bentuk-bentuk tersebut, nah di css ini kita dapat mengganti bentuk kursor mouse dengan gambar agar dapat diubah dengan bentuk yang tidak terbatas, berikut ini caranya.

<style type="text/css">
    p {
        cursor: url('image/patrick.png'), auto;
    }
 </style>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>

Dilihat dari source code diatas terlihat bahwa penulis telah merubah bentuk mouse ke bentuk gambar dengan nama file patrick.png yang berada di folder image, anda bisa mengubahnya kebentuk yang anda inginkan. Berikut ini hasil dari source-code diatas.

mengganti bentuk kursor mouse di css

Demikialah tutorial cara mengganti kursor mouse di css, semoga tutorial ini dapat bermanfaat dan bisa dikembangkan lebih lanjut.