CSS - Properti Cursor: Menunggangi gaya penunjuk mouse

Selamat datang, para pengembang web yang sedang berkembang! Hari ini, kita akan mendalamkan dunia menarik properti cursor CSS. Sebagai guru komputer tetangga Anda yang ramah, saya di sini untuk menggembalakan Anda dalam perjalanan ini dengan banyak contoh dan sedikit humor. Jadi, pegang mouse virtual Anda, dan mari kita mulai!

Apa itu Properti Cursor CSS?

Sebelum kita masuk ke hal yang mendalam, mari kita pahami apa yang dilakukan properti cursor. Dalam kata-kata sederhana, itu memungkinkan Anda mengubah penampilan pointer mouse saat ia melayang di atas elemen di halaman web Anda. Itu seperti memberikan mouse Anda make over untuk berbagai bagian website Anda!

Nilai yang Mungkin

Properti cursor CSS menawarkan berbagai nilai yang luas untuk dipilih. Mari kita lihat beberapa yang paling umum:

Nilai	Deskripsi
auto	Browser menentukan cursor
default	Cursor default ( biasanya panah)
pointer	Tangan penunjuk
text	Cursor pemilihan teks
wait	Cursor menunggu ( biasanya jam pasir)
help	Cursor bantuan ( biasanya tanda tanya)
move	Cursor pindah
crosshair	Cursor crosshair
not-allowed	Cursor tidak diperbolehkan

Dan masih banyak lagi! Kita akan mengeksplorasi beberapa di antaranya dalam contoh kita.

Diterapkan ke

Properti cursor dapat diterapkan ke setiap elemen HTML. Ini berarti Anda dapat mengubah cursor untuk seluruh bagian halaman Anda atau hanya untuk elemen tertentu seperti tombol atau tautan.

Sintaks DOM

Saat bekerja dengan JavaScript, Anda mungkin perlu mengakses properti cursor melalui DOM. Ini adalah cara Anda dapat melakukannya:

object.style.cursor = "value"

Misalnya:

document.getElementById("myButton").style.cursor = "pointer";

Kode ini akan mengubah cursor menjadi tangan penunjuk saat melayang di atas elemen dengan ID "myButton".

Properti Cursor CSS - Nilai Kata Kunci

mari kita mulai dengan beberapa contoh dasar menggunakan nilai kata kunci. Ini adalah aturan CSS yang mengubah cursor menjadi tangan penunjuk saat melayang di atas tombol:

button {
cursor: pointer;
}

Sekarang, mari kita buat contoh yang lebih kompleks dengan beberapa elemen:

<style>
.text-area { cursor: text; }
.link { cursor: pointer; }
.loading { cursor: wait; }
.locked { cursor: not-allowed; }
</style>

<div class="text-area">Ketik disini</div>
<a href="#" class="link">Klik saya!</a>
<div class="loading">Memuat...</div>
<button class="locked" disabled>Tidak dapat diklik ini</button>

Dalam contoh ini:

• Area teks menunjukkan cursor pemilihan teks
• Tautan menunjukkan tangan penunjuk
• Div memuat menunjukkan cursor menunggu
• Tombol dinonaktifkan menunjukkan cursor tidak diperbolehkan

Ingat, memilih cursor yang tepat dapat meningkatkan pengalaman pengguna. Itu seperti memberikan pengguna Anda petunjuk bisu tentang bagaimana berinteraksi dengan halaman Anda!

Properti Cursor CSS - Nilai

kadang-kadang, cursor default tidak cukup. Itulah saat cursor khusus datang ke penyelamat! Anda dapat menggunakan file gambar sebagai cursor Anda. Mari kita lihat bagaimana:

.custom-cursor {
cursor: url('path/to/your/cursor.png'), auto;
}

'auto' di akhir adalah fallback jika gambar gagal dimuat.

mari buat contoh yang menyenangkan:

<style>
.magic-wand {
cursor: url('magic-wand.png'), auto;
width: 200px;
height: 200px;
background-color: #f0f0f0;
text-align: center;
line-height: 200px;
}
</style>

<div class="magic-wand">Melayang untuk magis!</div>

Dalam contoh ini, saat Anda melayang di atas div, cursor Anda berubah menjadi tongkat sihir! Itu seperti mengubah website Anda menjadi Hogwarts!

Properti Cursor CSS - Nilai Ganda

kadang-kadang, satu cursor khusus tidak cukup. Anda dapat menentukan beberapa gambar cursor sebagai fallback:

.multi-cursor {
cursor: url('cursor1.png'), url('cursor2.png'), pointer;
}

Ini sangat berguna saat Anda menggunakan ukuran cursor yang berbeda untuk resolusi layar yang berbeda:

.responsive-cursor {
cursor: url('cursor-large.png') 48 48, url('cursor-small.png') 16 16, auto;
}

Nomor setelah setiap URL menentukan koordinat x dan y dari titik panas cursor.

mari buat contoh praktis:

<style>
.photo-edit {
cursor: url('brush-large.png') 8 8, url('brush-small.png') 4 4, crosshair;
width: 300px;
height: 200px;
background-color: #e0e0e0;
text-align: center;
line-height: 200px;
}
</style>

<div class="photo-edit">Melayang untuk mengedit</div>

Dalam contoh ini, kita mensimulasikan alat pengeditan foto. Cursor berubah menjadi ikon brush, dengan fallbacks untuk ukuran yang berbeda dan fallback akhir ke crosshair.

Kesimpulan

Dan itu adalah, teman-teman! Anda baru saja meningkatkan keterampilan CSS Anda dengan properti cursor. Ingat, cursor yang tepat dapat membuat website Anda tidak hanya fungsional, tapi juga intuitif dan menyenangkan untuk digunakan. Itu seperti memberikan pengguna Anda tongkat sihir untuk berinteraksi dengan halaman web Anda!

Saat kita mengakhiri, ini adalah sedikit humor pengembang web: Mengapa pengembang web menggunakan cursor 'pointer' di semua tombol mereka? Karena mereka ingin membuat 'poin' tentang desain UX yang baik!

Tetap berlatih, tetap menjelajahi, dan terutama, tetap bersenang-senang dengan CSS. Sampaijumpa lagi, coding yang menyenangkan!

Credits: Image by storyset