Dalam CSS, pelbagai jenis kursor digunakan untuk elemen HTML yang berbeza, dan untuk menukar jenis kursor, ' kursor ” harta digunakan. Ia membenarkan anda menukar jenis kursor dan menetapkan nilai kursor yang anda mahu paparkan pada skrin. Sebagai ciri tambahan, ia juga membolehkan anda menetapkan imej kursor anda sendiri.

Dalam panduan ini, anda akan belajar:

• Apakah sifat CSS kursor
• Bagaimana untuk menukar kursor kepada imej pada Hover menggunakan CSS

Jadi, mari kita mulakan!

Apakah 'kursor' CSS Property?

Untuk mengawal penampilan tetikus pada elemen HTML, “ kursor ” sifat CSS boleh digunakan. Ia membolehkan menukar kursor biasa kepada jenis yang berbeza seperti salin kursor, penunjuk tangan, ambil dan banyak lagi. Anda juga boleh menetapkan kursor tersuai anda sendiri dengan menetapkan url imej dalam sifat kursor.

Sintaks

Sintaks sifat kursor diberikan sebagai:

Dalam sintaks yang diberikan di atas, tetapkan laluan imej dalam ' url() ” yang anda mahu paparkan pada skrin.

Kami kini akan beralih ke contoh untuk menukar kursor biasa kepada imej pada hover.

Bagaimana Menukar Kursor kepada Imej pada Hover Menggunakan CSS?

Untuk menukar kursor kepada imej pada tuding, pertama, tambahkan elemen dalam HTML.

Contoh 1: Menukar Kursor kepada Imej pada Tuding menggunakan Harta kursor

Kami akan membuat tajuk

dan nama kelas butang ' btn ”.

HTML

< badan >
< h1 > Tukar Kursor kepada Imej pada Hover h1 >
< butang kelas = 'btn' > Klik Saya butang >
badan >

Pada masa ini, menuding pada butang akan menunjukkan kursor lalai:

Sekarang beralih ke CSS dan tukar kursor kepada imej.

Kemudian, tetapkan laluan imej dalam ' url() ”. Sebagai contoh, kami telah menyatakan “i dengan.svg ” sebagai imej pilihan kami. Kemudian, tetapkan nilai sifat kursor sebagai “ auto ”.

CSS

.btn {
kursor: url ( icon.svg ) , auto;
padding: 10px;
}

Simpan kod di atas dan laksanakan fail HTML untuk melihat hasil berikut:

Output yang diberikan menunjukkan bahawa kursor berjaya ditukar menjadi imej pada hover.

Catatan: “ auto ” digunakan sebagai pilihan alternatif dalam sifat kursor; apabila imej tidak dimuatkan, atau laluan fail atau fail itu sendiri tiada, ikon lalai dipaparkan pada skrin kerana nilai auto.

Contoh 2: Menetapkan Kursor Lalai pada Tuding

Sebagai contoh, kami akan memberikan url imej dan hanya menetapkan nilai sifat kursor sebagai “ auto ”:

kursor: url ( ) , auto;

Akibatnya, kursor tidak akan berubah apabila dilegar di atas butang:

Contoh 3: Menetapkan Alternatif Imej pada Tuding

Di tempat auto, anda boleh menetapkan nilai kursor yang berbeza yang anda ingin paparkan sebagai alternatif kepada imej. Sebagai contoh, kami akan menukar nilai sifat kursor daripada “ auto ” kepada “ penunjuk ”:

kursor: url ( ) , penunjuk;

Seperti yang anda lihat dalam output di bawah, kursor ditukar menjadi penunjuk tangan apabila ia menuding di atas butang:

Kami telah menyediakan kaedah paling mudah untuk menukar imej kursor pada hover menggunakan CSS.

Kesimpulan

Dalam CSS, anda boleh menukar kursor kepada imej pada hover menggunakan ' kursor ” harta. Ia membenarkan menukar kursor biasa kepada imej dengan menetapkan ' url ” imej kepada sifat kursor. Anda boleh menggunakan sebarang jenis kursor yang anda mahu paparkan apabila ia telah berlegar pada elemen. Artikel ini menunjukkan kaedah menukar kursor kepada penunjuk tangan.