Tutorial CSS kali ini mempelajari Pengaturan Cursor HTML dengan CSS. Properti cursor CSS memungkinkan Anda untuk menentukan jenis cursor yang harus ditampilkan kepada pengguna.
Tutorial CSS kali ini mempelajari Pengaturan Cursor HTML dengan CSS. Properti cursor CSS memungkinkan Anda untuk menentukan jenis cursor yang harus ditampilkan kepada pengguna.
Salah satu penggunaan yang baik dari properti ini adalah dalam menggunakan gambar untuk tombol submit pada formulir. Secara default, ketika cursor melayang di atas link, cursor berubah dari pointer ke tangan. Namun, itu tidak mengubah bentuk untuk tombol submit pada formulir. Oleh karena itu, setiap kali seseorang melayang di atas gambar yang tombol kirim, ia menyediakan petunjuk visual yang gambar dapat diklik.
Tabel berikut menunjukkan nilai yang mungkin untuk properti cursor -
| Value | Deskripsi |
|---|---|
| auto | Bentuk cursor tergantung pada daerah konteks itu lebih. Sebagai contoh, sebuah I atas teks, sebuah 'hand' atas link, dan sebagainya. |
| crosshair | Sebuah crosshair atau tanda plus |
| default | Sebuah panah |
| pointer | Sebuah menunjuk hand (di IE 4 nilai ini adalah hand). |
| move | The 'I' bar |
| e-resize | cursor menunjukkan bahwa tepi kotak harus pindah kanan (timur). |
| ne-resize | cursor menunjukkan bahwa tepi kotak yang akan naik dan kanan (utara / timur). |
| nw-resize | cursor menunjukkan bahwa tepi kotak harus pindah dan left (utara / barat). |
| n-resize | cursor menunjukkan bahwa tepi kotak harus naik (utara). |
| se-resize | cursor menunjukkan bahwa tepi kotak akan dipindahkan ke bawah dan right (selatan / timur). |
| sw-resize | cursor menunjukkan bahwa tepi kotak akan dipindahkan ke bawah dan kiri (selatan / barat). |
| s-resize | cursor menunjukkan bahwa tepi kotak akan dipindahkan ke bawah (selatan). |
| w-resize | cursor menunjukkan bahwa tepi kotak harus pindah kiri (barat). |
| text | The I bar. |
| wait | Jam pasir. |
| help | Sebuah tanda tanya atau balon, ideal untuk digunakan lebih dari tombol bantuan. |
| <url> | Sumber file gambar cursor . |
CATATAN: Anda harus mencoba untuk hanya menggunakan nilai-nilai ini untuk menambahkan informasi yang berguna bagi pengguna, dan di tempat-tempat, mereka akan mengharapkan untuk melihat cursor tersebut. Misalnya, menggunakan crosshair ketika seseorang melayang di atas link dapat membingungkan pengunjung.
Berikut adalah contoh -
<html> <head> </head> <body> <p>Move the mouse over the words to see the cursor change:</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> </body> </html>
Ini akan menghasilkan hasil sebagai berikut -
COMMENTS