Di CSS, berbagai jenis kursor digunakan untuk elemen HTML yang berbeda, dan untuk mengubah jenis kursor, tombol “ kursor ” properti digunakan. Ini memungkinkan Anda untuk mengubah jenis kursor dan mengatur nilai kursor yang ingin Anda tampilkan di layar. Sebagai fitur tambahan, ini juga memungkinkan Anda mengatur gambar kursor Anda sendiri.

Dalam panduan ini, Anda akan belajar:

• Apa itu properti CSS kursor
• Bagaimana mengubah kursor ke gambar di Hover menggunakan CSS

Jadi ayo mulai!

Apa itu Properti CSS 'kursor'?

Untuk mengontrol tampilan mouse di atas elemen HTML, tombol “ kursor ” properti CSS dapat digunakan. Ini memungkinkan mengubah kursor biasa menjadi berbagai jenis seperti kursor salin, penunjuk tangan, ambil, dan banyak lagi. Anda juga dapat mengatur kursor kustom Anda sendiri dengan mengatur url gambar di properti kursor.

Sintaksis

Sintaks properti kursor diberikan sebagai:

Dalam sintaks yang diberikan di atas, tetapkan jalur gambar di ' url() ” yang ingin Anda tampilkan di layar.

Kami sekarang akan pindah ke contoh untuk mengubah kursor biasa menjadi gambar saat melayang.

Bagaimana Mengubah Kursor ke Gambar saat Melayang Menggunakan CSS?

Untuk mengubah kursor menjadi gambar saat mengarahkan kursor, pertama, tambahkan elemen dalam HTML.

Contoh 1: Mengubah Kursor ke Gambar di Arahkan menggunakan kursor Properti

Kita akan membuat heading

dan nama kelas tombol “ btn ”.

HTML

< tubuh >
< h1 > Ubah Kursor ke Gambar di Arahkan h1 >
< tombol kelas = 'btn' > Klik Saya tombol >
tubuh >

Saat ini, mengarahkan kursor ke tombol akan menampilkan kursor default:

Sekarang pindah ke CSS dan ubah kursor ke gambar.

Kemudian, atur jalur gambar di “ url() ”. Misalnya, kami telah menetapkan 'i' dengan.svg ” sebagai gambar pilihan kami. Kemudian, atur nilai properti kursor sebagai “ mobil ”.

CSS

.btn {
kursor: url ( icon.svg ) , otomatis;
bantalan: 10 piksel;
}

Simpan kode di atas dan jalankan file HTML untuk melihat hasil berikut:

Output yang diberikan menunjukkan bahwa kursor berhasil diubah menjadi gambar di hover.

Catatan: “ mobil ” digunakan sebagai opsi alternatif di properti kursor; ketika gambar tidak dimuat, atau jalur file atau file itu sendiri hilang, ikon default ditampilkan di layar karena nilai otomatis.

Contoh 2: Mengatur Kursor Default pada Arahkan

Misalnya, kami akan memberikan url gambar dan hanya menetapkan nilai properti kursor sebagai “ mobil ”:

kursor: url ( ) , otomatis;

Akibatnya, kursor tidak akan berubah saat diarahkan ke tombol:

Contoh 3: Mengatur Alternatif Gambar pada Arahkan Arah

Di tempat otomatis, Anda dapat mengatur nilai kursor yang berbeda yang ingin Anda tampilkan sebagai alternatif gambar. Misalnya, kita akan mengubah nilai properti kursor dari “ mobil ' ke ' penunjuk ”:

kursor: url ( ) , penunjuk;

Seperti yang Anda lihat pada output di bawah ini, kursor diubah menjadi penunjuk tangan saat melayang di atas tombol:

Kami telah menyediakan metode termudah untuk mengubah gambar kursor saat melayang menggunakan CSS.

Kesimpulan

Di CSS, Anda dapat mengubah kursor ke gambar saat mengarahkan kursor menggunakan ' kursor ' Properti. Hal ini memungkinkan mengubah kursor biasa ke gambar dengan menetapkan ' url ” dari gambar ke properti kursor. Anda dapat menerapkan jenis kursor apa pun yang ingin Anda tampilkan ketika kursor itu melayang pada suatu elemen. Artikel ini menunjukkan metode mengubah kursor menjadi penunjuk tangan.