Pada kesempatan kali ini saya akan menjelaskan cara menggunakan property cursor di css. Mungkin sebagian dari teman-teman sudah tahu cara menerapkan property tersebut di suatu element html dari css. Namun untuk yang masih belum mengerti jenis-jenis dan cara penggunaan property tersebut, akan saya berikan contoh dengan jenis-jenis cursor yang dapat teman-teman gunakan di website yang teman-teman buat. Dalam teknologi komputasi, kursor adalah suatu petunjuk atau indikator posisi pada monitor komputer dan peranti tampilan lain yang akan merespons masukan dari suatu masukan teks atau peranti penunjuk. Namun untuk penggunaan di kalangan programming, cursor tersebut terdiri dari beberapa jenis yang berbeda dan bisa di terapkan pada suatu website guna memberikan suatu petunjuk atau indikator posisi kepada pengunjung.
Untuk menerapkannya di dalam website, teman-teman bisa menggunakan property css dan dari jenis-jenis tersebut bisa mempercantik tampilan di website teman-teman.
Berikut Tahapannya
- Teman-teman bisa buat terlebih dahulu satu buah file dengan nama index.html, dan ketikan seperti kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Menggunakan Property Cursor Di CSS By Dumet School</title>
<style type="text/css">
.mouse{width: 300px; height:auto; margin:15px auto;}
.mouse .caption{font-size: 18px; font-weight: bold; color: #f00; text-align: center; margin: 0 0 30px 0;}
a.satu{cursor:default;}
a.dua{cursor:hand;}
a.tiga{cursor:pointer;}
a.empat{cursor:crosshair;}
a.lima{cursor:text;}
a.enam{cursor:wait;}
a.tujuh{cursor:help;}
a.delapan{cursor:move;}
a.sembilan{cursor:e-resize;}
a.sepuluh{cursor:ne-resize;}
a.sebelas{cursor:nw-resize;}
a.duabelas{cursor:n-resize;}
a.tigabelas{cursor:se-resize;}
a.empatbelas{cursor:sw-resize;}
a.limabelas{cursor:s-resize;}
a.enambelas{cursor:w-resize;}
a.tujuhbelas{cursor:progress;}
a.delapanbelas{cursor:all-scroll;}
a.sembilanbelas{cursor:col-resize;}
a.duapuluh{cursor:no-drop;}
a.duapuluhsatu{cursor:not-allowed;}
a.duapuluhdua{cursor:row-resize;}
a.duapuluhtiga{cursor:vertical-text;}
</style>
</head>
<body>
<div class="mouse">
<a class="satu"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor Default</div>
<div class="mouse">
<a class="dua"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor Hand</div>
<div class="mouse">
<a class="tiga"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor Pointer</div>
<div class="mouse">
<a class="empat"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor Crosshair</div>
<div class="mouse">
<a class="lima"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor Text</div>
<div class="mouse">
<a class="enam"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor Wait</div>
<div class="mouse">
<a class="tujuh"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor Help</div>
<div class="mouse">
<a class="delapan"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor Move</div>
<div class="mouse">
<a class="sembilan"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor e-resize</div>
<div class="mouse">
<a class="sepuluh"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor ne-resize</div>
<div class="mouse">
<a class="sebelas"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor nw-resize</div>
<div class="mouse">
<a class="duabelas"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor n-resize</div>
<div class="mouse">
<a class="tigabelas"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor se-resize</div>
<div class="mouse">
<a class="empatbelas"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor sw-resize</div>
<div class="mouse">
<a class="limabelas"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor s-resize</div>
<div class="mouse">
<a class="enambelas"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor w-resize</div>
<div class="mouse">
<a class="tujuhbelas"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor progress</div>
<div class="mouse">
<a class="delapanbelas"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor all-scroll</div>
<div class="mouse">
<a class="sembilanbelas"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor col-resize</div>
<div class="mouse">
<a class="duapuluh"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor no-drop</div>
<div class="mouse">
<a class="duapuluhsatu"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor not-allowed</div>
<div class="mouse">
<a class="duapuluhdua"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor row-resize</div>
<div class="mouse">
<a class="duapuluhtiga"><img src="https://cdn.pixabay.com/photo/2017/01/14/10/56/men-1979261_960_720.jpg" width="100%;"></a>
<div class="caption">Jenis Cursor vertical-text</div>
</div>
</body>
</html>
- Jika sudah teman-teman save terlebih dahulu file tersebut, dan lihat hasilnya pada browser teman-teman.
Sampai disini penjelasan saya mengenai cara menggunakan property cursor di css, semoga bermanfaat.