tukar kursor css

Cursor change css

Dalam reka bentuk web, kadangkala kita perlu menukar gaya tetikus supaya tetikus mempunyai kesan visual dan pengalaman interaktif yang lebih baik semasa interaksi pengguna. Pada masa ini, kita boleh menukar gaya kursor melalui CSS. Artikel ini akan memperkenalkan cara menukar gaya kursor melalui CSS.

1. Sifat kursor CSS

Sifat kursor CSS digunakan untuk menentukan gaya penuding tetikus. Sifat ini menerima nilai yang mewakili keadaan berbeza penunjuk tetikus. Keadaan ini termasuk lalai, pautan, pemilihan teks, pindah, dsb. Berikut ialah sintaks atribut kursor CSS:

cursor: value;

dengan nilai boleh menjadi salah satu daripada nilai berikut:

• auto
• lalai
• tiada
• menu konteks
• bantuan
• penunjuk
• kemajuan
• tunggu
• sel
• garis silang
• teks
• teks menegak
• alias
• salin
• gerakkan
• tidak jatuh
• tidak diberi nilai
• meraih
• meraih

2. >

Gaya penunjuk tetikus yang paling biasa ialah tangan, yang menunjukkan bahawa tetikus menghala pada pautan. Gaya bentuk tangan boleh diubah suai melalui CSS.

a:tuding {

cursor: grab;

}

Apabila tetikus menghala ke pautan, tetikus bertukar kepada corak jari. Apabila tetikus melayang di atas pautan, anda boleh menggunakan CSS untuk mengubah suai gaya penuding tetikus untuk diambil, menjadikannya kelihatan seperti pemegang pegangan.

2. Simbol terlarang

Satu lagi gaya penunjuk tetikus biasa ialah simbol terlarang, yang biasanya digunakan untuk menunjukkan bahawa pengguna tidak boleh melakukan operasi tertentu.

.disable{

cursor: not-allowed;

}

Anda boleh menukar tetikus kepada bentuk simbol terlarang dengan menetapkan nilai yang tidak dibenarkan bagi atribut kursor CSS. Contohnya, jika anda menetapkan kelas CSS butang tindakan kepada .disable, maka apabila pengguna cuba mengklik butang itu, penunjuk tetikus akan bertukar menjadi simbol nyahdaya.

3. Simbol menunggu

Kadangkala, apabila halaman mengambil masa untuk memuatkan atau melakukan operasi tertentu, anda boleh menggunakan simbol menunggu untuk memberitahu pengguna bahawa operasi sedang berjalan dan tidak perlu ditinggalkan. tergesa-gesa.

.memuatkan {

cursor: wait;

}

Anda boleh menetapkan nilai tunggu atribut kursor CSS untuk menukar penunjuk tetikus kepada simbol tunggu. Contohnya, apabila memuatkan imej yang besar, anda boleh menjadikan penuding tetikus bertukar menjadi simbol tunggu apabila tetikus menghala ke imej, memberitahu pengguna bahawa halaman sedang dimuatkan.

3. Gaya kursor tersuai

Selain gaya penuding tetikus biasa, anda juga boleh mencipta corak kursor tersuai melalui CSS.

.custom{

cursor: url('custom-cursor.png'), auto;

}

Anda boleh menentukan laluan corak kursor tersuai dengan menetapkan nilai url atribut kursor CSS. Dalam contoh ini, kami menetapkan laluan kepada 'testcursor.png' dan gaya kursor kepada auto. Ini akan menentukan bentuk kursor tersuai dan menggunakannya pada elemen yang ditentukan.

4. Gerakkan acara tetikus

Untuk meningkatkan interaksi pengguna dan kesan visual, anda boleh menukar gaya penuding tetikus melalui acara gerakkan tetikus.

.box{

cursor: pointer;
transition: all .5s ease;

}

.box:hover{

transform: rotate(90deg);

}

Dalam contoh ini, kami menetapkan elemen .box The Sifat kursor CSS ialah penuding, yang menukar penunjuk tetikus menjadi jari yang menuding pada elemen itu. Kami juga menggunakan animasi peralihan CSS3. Apabila pengguna menuding tetikus di atas elemen .box, elemen itu akan berputar 90 darjah dan penunjuk tetikus akan berubah menjadi gaya anak panah berputar.

Secara keseluruhan, menukar gaya kursor melalui CSS ialah helah yang berguna untuk menjadikan interaksi pengguna lebih peribadi dan menarik. Kita boleh memilih gaya kursor yang berbeza mengikut keperluan khusus untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci tukar kursor css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!