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 |
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>Code language: HTML, XML (xml)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>Code language: HTML, XML (xml)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.
Demikialah tutorial cara mengganti kursor mouse di css, semoga tutorial ini dapat bermanfaat dan bisa dikembangkan lebih lanjut.
