Mengganti Cursor di CSS
Salam Coder ^_*
CSS memungkinkan kita untuk dapat mengubah atau mengganti bentuk kursor mouse di css dengan mudah sesuai keinginan. Pada kesempatan yang baik ini kita akan belajar untuk mengganti jenis kursor sesuai keinginan kita.
Kursor merupakan 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.
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.
| Parameter | Keterangan Parameter |
| auto | Bentuk kursor pointer mouse secara auto tergantung elemen tersebut, apakah sebuah teks atau link yang nantinya akan menyesuaikan bentuknya sendiri |
| crosshair | Berbentuk crosshair atau tanda plus |
| default | Berbentuk anak panah |
| pointer | Berbentuk jari telunjuk |
| move | Berbentuk anak panah empat arah untuk memindahkan elemen |
| e-resize | Berbentuk anak panah dua arah secara horizontal |
| ne-resize | Berbentuk anak panah dua arah miring ke kanan atas |
| nw-resize | Berbentuk anak panah dua arah miring ke kiri atas |
| n-resize | Berbentuk anak panah dua arah vertical |
| se-resize | Berbentuk anak panah dua arah miring ke kiri atas |
| sw-resize | Berbentuk anak panah dua arah miring ke kanan atas |
| s-resize | Berbentuk anak panah dua arah vertical |
| w-resize | Berbentuk anak panah dua arah secara horizontal |
| text | Berbentuk simbol “I” untuk melakukan blok teks |
| wait | Berbentuk seperti loading |
| help | Biasanya kursor akan berbentuk anak panah dengan ada tanda tanya disampingnya |
| (url) | Untuk dapat mengubah kursor ke gambar |
Cara Penggunaan Parameter
Untuk penulisan codenya seperti di bawah ini dan bisa di coba satu-satu untuk format cursor. Agar kursor dapat berubah bentuk.
<html>
<head>
<title>Menggunakan Komentar di HTML</title>
</head>
<body>
<p>
<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>
</p>
</body>
</html> Silahkan arahkan mouse ke teks-teks dibawah untuk dapat melihat apakah sudah berkerja dengan benar atau belum
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
Sekian tentang Cara mengganti cursor di CSS. Semoga Mudah dipahami dan Sobat bisa langsung mencobanya.
Semoga artikel ini bermanfaat dan Penulis juga masih terus belajar dan Maaf jika masih banyak kekurangan. Apabila ada yang kurang jelas dan ingin di pertanyakan, bisa langsung tulis di kolom komentar di bawah ini.
Salam Coder
Penulis
www.dhiecoderweb.com
.png)
.png)
Post a Comment