Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial CSS Bagian 35 : Cara Menggunakan Property Display di CSS. Pada tutorial kali ini, kita akan belajar cara menggunakan property cursor di CSS.
Property ini digunakan untuk menentukan jenis kursor mouse saat penunjuk mouse ada di elemen. Property ini memungkinkan kita menentukan jenis kursor, yang akan ditampilkan kepada pengguna.
Saat pengguna mengarahkan kursor ke tautan, maka secara default, kursor berubah sesuai dengan style yang kita tentukan.
Mari kita pahami nilai properti kursor.
| Nilai | Kegunaan |
| alias | Digunakan untuk menampilkan indikasi kursor dari sesuatu yang akan dibuat. |
| auto | Kursor berbentuk default di mana browser menampilkan kursor untuk mengetik. |
| all-scroll | Menampilkan symbol kursor bergulir. |
| col-resize | Menampilkan kursor akan menyatakan bahwa kolom dapat diubah ukurannya secara horizontal. |
| cell | Kursor akan menunjukkan sel atau kumpulan sel yang dipilih. |
| context-menu | Kursor menunjukkan ketersediaan menu konteks. |
| default | Ini menunjukkan panah, yang merupakan kursor default. |
| copy | Kursor menunjukkan bahwa ada sesuatu yang disalin. |
| copy | Kursor berubah menjadi crosshair atau tanda tambah. |
| e-resize | Kursor mewakili arah timur dan menunjukkan bahwa tepi kotak akan digeser ke kanan. |
| ew-resize | Kursor mewakili arah timur/barat dan menunjukkan kursor pengubah ukuran dua arah. |
| n-resize | Kursor mewakili arah utara yang menunjukkan bahwa tepi kotak akan digeser ke atas. |
| ne-resize | Kursor mewakili arah utara/timur dan menunjukkan bahwa tepi kotak akan digeser ke atas dan ke kanan. |
| move | Kursor menunjukkan bahwa ada sesuatu yang harus digeser. |
| help | Kursor berbentuk tanda tanya atau balon, yang menunjukkan bahwa bantuan tersedia. |
| none | Digunakan untuk menunjukkan bahwa tidak ada kursor yang diberikan untuk elemen. |
| no-drop | Digunakan untuk menyatakan bahwa item yang diseret tidak dapat dijatuhkan di sini. |
| s-resize | Ini menunjukkan kotak tepi akan dipindahkan ke bawah. Kursor menunjukkan arah selatan. |
| row-resize | Digunakan untuk menunjukkan bahwa baris dapat diubah ukurannya secara vertikal. |
| se-resize | Kursor mewakili arah selatan/timur, yang menunjukkan bahwa kotak tepi akan dipindahkan ke bawah dan ke kanan. |
| sw-resize | Kursor mewakili arah selatan/barat dan menunjukkan bahwa ujung kotak akan digeser ke bawah dan ke kiri. |
| wait | Kursor mewakili jam pasir. |
| <url> | Kursor menunjukkan sumber file gambar kursor. |
| w-resize | Kursor menunjukkan arah barat dan menyatakan bahwa tepi kotak akan digeser ke kiri. |
| zoom-in | Digunakan untuk menunjukkan bahwa sesuatu dapat diperbesar. |
| zoom-out | Digunakan untuk menunjukkan bahwa sesuatu dapat diperkecil. |
Contoh penggunaan property display di CSS :
<html>
<head>
</head>
<style>
body{
background-color: lightblue;
color:green;
text-align: center;
font-size: 20px;
}
</style>
<body>
<p> Gerakkan mouse Anda ke kata-kata di bawah ini untuk mengubah kursor.</p>
<div style = "cursor:alias">alias value</div>
<div style = "cursor:auto">auto value</div>
<div style = "cursor:all-scroll">all-scroll value</div>
<div style = "cursor:col-resize">col-resize value</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default value</div>
<div style = "cursor:copy">copy value</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ew-resize">ew-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>
<div style = "cursor:progress">Progress</div>
<div style = "cursor:no-drop">no-drop</div>
<div style = "cursor:not-allowed">not-allowed</div>
<div style = "cursor:vertical-text">vertical-text</div>
<div style = "cursor:zoom-in">Zoom-in</div>
<div style = "cursor:zoom-out">Zoom-out</div>
</body>
</html>Hasil dari kode di atas adalah :
Itu dia cara menggunakan property cursor. Semoga tutorial ini bisa membantu Anda untuk memelajari cara menggunakan property cursor di CSS.
0 Komentar