Kursor CSS tersuai

Kursor menunjukkan kedudukan pada skrin di mana pengguna boleh mengklik atau memasukkan teks. Terdapat kursor yang berbeza digunakan untuk komponen tapak web yang berbeza. Pembangun mesti memastikan kursor yang digunakan dalam aplikasi mestilah menarik. Sebagai contoh, kursor tangan menunjuk boleh digunakan pada butang pada tuding tetikus. Penunjuk teks (garisan berkelip) digunakan pada kotak teks di mana teks hendak dimasukkan.

Terdapat beberapa gaya kursor dalam CSS yang digunakan dengan hanya menentukan nilai sifat kursor. Walau bagaimanapun, pembangun boleh mencipta kursor tersuai menggunakan CSS.

Panduan kajian ini akan menyediakan mengenai:

- kursor CSS
- CSS kursor tersuai

Sebelum mencecah topik, mari lihat beberapa bentuk kursor CSS dengan contoh praktikal.

kursor CSS

CSS ' kursor ” harta mempunyai nilai yang berbeza, seperti penunjuk, tiada, kemajuan dan banyak lagi. Mari buat jadual yang mengandungi baris yang mana kursor berbeza akan dipaparkan pada tuding tetikus.

Contoh: Mencipta Jadual yang Mewakili kursor CSS yang berbeza dalam HTML

Mula-mula, tambah elemen

dalam HTML. Di dalam elemen ini:

- Teg

akan digunakan untuk membuat baris.

Baris pertama mengandungi tajuk.

Tajuk ini ditentukan dengan menggunakan tag

lain mengandungi dua teg

. Teg
untuk mengisi lajur dengan data. Teg	kedua mewakili elemen butang yang digunakan dengan CSS “ kursor ” harta dengan nilai yang berbeza. Kod HTML untuk senario di atas diberikan di bawah: < meja > < tr > < ke gaya = 'lebar: 200px;' > pemilih kursor css ke > < ke gaya = 'lebar: 200px;' > gaya kursor ke > tr > < tr > < td > kursor: penunjuk td > < td >< butang gaya = 'kursor: penunjuk;' > penunjuk butang > td > tr > < tr > < td > kursor: kemajuan td > < td >< butang gaya = 'kursor: kemajuan;' > kemajuan butang > td > tr > < tr > < td > kursor: tidak dibenarkan td > < td >< butang gaya = 'kursor: tidak dibenarkan;' > tidak dibenarkan butang > td > tr > < tr > < td > kursor: tiada td > < td >< butang gaya = 'kursor: tiada;' > tiada butang > td > tr > < tr > < td > kursor: bergerak td > < td >< butang gaya = 'kursor: gerakkan;' > bergerak butang > td > tr > < tr > < td > kursor: ambil td > < td >< butang gaya = 'kursor: ambil;' > merebut butang > td > tr > < tr > < td > kursor: salinan td > < td >< butang gaya = 'kursor: salin;' > salinan butang > td > tr > < tr > < td > kursor: saiz semula col td > < td >< butang gaya = 'kursor: col-resize;' > saiz semula col butang > td > tr > < tr > < td > kursor: ubah saiz baris td > < td >< butang gaya = 'kursor: row-resize;' > ubah saiz baris butang > td > tr > < tr > < td > kursor: teks td > < td >< butang gaya = 'kursor: teks;' > teks butang > td > tr > meja > Kod di atas akan menghasilkan hasil berikut: Dalam bahagian seterusnya, kami akan menggunakan gaya yang berbeza pada elemen HTML. Gayakan 'semua' Elemen * { padding: 0 ; margin: 0 ; jenis huruf: Arial, Helvetica, sans-serif; } Semua elemen HTML digunakan dengan gaya CSS yang diterangkan di bawah: “ padding ” harta dengan “ 0 nilai ” tidak termasuk ruang di sekeliling kandungan elemen. “ margin ” harta dengan “ 0 nilai ” tidak menambah ruang di luar setiap elemen. “ font-family 'harta benda diberi nilai' Arial, Helvetica, sans-serif ”. Senarai gaya fon diberikan untuk memastikan jika gaya pertama tidak disokong oleh pelayar, gaya lain mesti digunakan. Elemen 'jadual' gaya meja { margin: 0px auto; sempadan: 1px gainsboro pepejal; } Elemen jadual HTML digunakan dengan sifat CSS yang diterangkan di bawah: “ sempadan ' harta ditetapkan dengan nilai ' 1px gainsboro pepejal ” yang masing-masing mewakili lebar jidar, gaya jidar dan warna jidar. “ margin ” harta berkelakuan seperti yang dinyatakan di atas. Gaya Elemen 'td'. td { text-align: tengah; } Elemen	digunakan dengan sifat “ penjajaran teks 'dengan nilai' pusat ”. Ia akan menjajarkan teks lajur di tengah. Elemen 'butang' gaya butang { warna latar belakang: biru kadet; padding: 10px 10px; warna: #ffffff; lebar: 150px; } Elemen butang yang digunakan dalam kod HTML di atas digayakan dengan sifat CSS baharu yang diterangkan di bawah: “ warna latar belakang ” menentukan warna pada latar belakang elemen. “ padding ” dengan nilai yang ditetapkan sebagai “ 10px 10px ” menambah ruang 10px di bahagian atas-bawah dan 10px di sebelah kiri-kanan item elemen. “ warna ” melaraskan warna fon elemen. “ lebar ” ialah sifat yang melaraskan lebar elemen. Kod di atas akan menghasilkan hasil berikut: Setakat ini, kami telah membincangkan kursor yang disediakan oleh CSS. Dalam bahagian yang akan datang, contoh akan menerangkan cara membuat kursor tersuai dengan CSS. CSS kursor tersuai Pembangun mesti menggunakan kursor yang sesuai untuk aplikasi mereka. Kursor harus dibuat menarik untuk menarik perhatian pengguna. Selain itu, kursor tersuai boleh dibuat untuk tujuan ini. Lihat contoh di bawah! Contoh: Bagaimana untuk Mencipta Kursor Tersuai dengan CSS? Dalam HTML, tambahkan dua elemen div. Satu dengan kelas ' bulatan 'dan yang lain dengan kelas' titik ”. HTML < div kelas = 'bulatan' > div > < div kelas = 'titik' > div > Mari teruskan ke bahagian CSS. Elemen 'badan' gaya badan { ketinggian: 100vh; } Elemen badan fail HTML digunakan dengan gaya “ ketinggian ” harta untuk menetapkan ketinggian elemen. Gaya 'bulatan' div .bulatan { lebar: 20px; ketinggian: 20px; sempadan: 2px putih pepejal; jejari sempadan: lima puluh % ; } Di bawah ialah penjelasan sifat CSS yang digunakan pada elemen div yang mempunyai kelas ' bulatan ”: “ lebar ” harta melaraskan lebar elemen. “ sempadan harta ” dengan nilai yang dinyatakan sebagai “ 2px putih pepejal ” mewakili lebar jidar, gaya jidar dan warna. “ jejari sempadan ” harta mengubah pusingan sempadan elemen. Gaya 'titik' div .titik { lebar: 5px; ketinggian: 5px; warna latar belakang: putih; jejari sempadan: lima puluh % ; } Elemen div dengan titik kelas disediakan dengan sifat berbeza yang diterangkan di bawah: “ warna latar belakang sifat ” menentukan warna latar belakang elemen. “ jejari sempadan ” menetapkan bulatan tepi elemen. Ciri-ciri lain akan berfungsi sama seperti yang dibincangkan. Kod yang diberikan akan memaparkan kursor berikut pada halaman web: Kami telah mencipta kursor menggunakan HTML dan CSS. Sekarang, dalam bahagian seterusnya, kod JavaScript ditulis untuk menambah fungsi yang diperlukan pada kursor. JavaScript < skrip > const cursorCircle = document.querySelector ( '.bulatan' ) ; const cursorPoint = document.querySelector ( '.titik' ) ; const moveCursor = ( dan ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` menterjemah ( ${mouseX} px, ${mouseY} px ) ` ; cursorPoint.style.transform = ` menterjemah ( ${mouseX} px, ${mouseY} px ) ` ; } window.addEventListener ( 'mousemove' , gerakkanKursor ) skrip > Penerangan kod JavaScript di atas diberikan di bawah: “ teg ” dipasangkan dengan teg , yang digunakan untuk menulis kod JavaScript. “ const ” kata kunci mengenal pasti bahawa kata kunci const diikuti oleh pembolehubah tidak boleh ditetapkan semula. “ document.querySelector(‘.circle’) ” mengembalikan elemen div bulatan yang sepadan dengan pemilih yang ditentukan dalam dokumen. “ document.querySelector(‘.point’) ” mengembalikan elemen div titik yang sepadan dengan pemilih yang ditentukan dalam dokumen. “ const moveCursor = (e) => ” fungsi ini menentukan fungsi kursor. “ e.klienY ” mengembalikan koordinat menegak apabila peristiwa tetikus dicetuskan. “ e.clientX ” mengembalikan koordinat mendatar apabila peristiwa tetikus dicetuskan. “ cursorCircle.style.transform ” div bulatan digunakan dengan perubahan gaya. “ cursorPoint.style.transform ” titik div digunakan dengan perubahan gaya. “ terjemah(${mouseX}px, ${mouseY}px) ” nilai sifat transformasi menetapkan koordinat mendatar dan menegak. “ window.addEventListener('mouse', moveCursor) ” kaedah pendengar acara akan mendengar pergerakan tetikus. Ia adalah sebahagian daripada objek tetingkap global. Selepas menyediakan blok kod di atas, kursor akan bergerak secara automatik pada skrin seperti yang ditunjukkan di bawah: Itu hebat! Kami telah mencipta kursor tersuai dengan sifat CSS yang berbeza. Kesimpulan CSS ' kursor Harta ” mempunyai banyak nilai yang menunjukkan pelbagai gaya kursor. Walau bagaimanapun, dengan menggunakan elemen HTML dan sifat CSS, kami boleh membuat kursor tersuai. Kemudian, kod JavaScript dilaksanakan untuk mengaktifkan fungsinya. Kajian ini telah menunjukkan cara membuat kursor CSS tersuai dengan contoh praktikal. Lain-lain Kategori Pai Raspberi Ethernet Yang Lain Nano Zum Kayu Manis Ulasan Zorinos Radio Minecraft Ssh Bukaan Terbuka Pemampatan Laravel Kapal Terbang Perisian Produktiviti Pejabat But Panggilan Sistem Sysctl Rangkaian Gpu Curang Plex Uefi Tukang Dok Tembok Api Wireshark Sinologi Pdf Ethereum Os Parrot Luhur Selinux Hiper-V Telefon Kod Gnome Makanan Istimewa Tetikus Nmap Metasploit Arus Deras Tablet Pycharm Kerinting Di Mana Gcc Fon Ssl Nvidia Gambar Usb Sotong Jodoh Pemain Media Vlc Dns Bitcoin Papan Kekunci Pemandangan Dalam Penyulitan Fedora Owncloud Pengimbas Atom Topi Merah Teamviewer Skype Vpn Xfce Buku Nota Jupyter Nfs Blog Lvm Kejayaan Pemain Media Posix Wap Jenkins Kuasa Oracle Linux Netstat Meter Persegi Bluetooth Ssd Cengkaman Gentoo Pengembaraan Audio Cpu Aliran Tensor Autodesk Pelincir Llvm Tingkap Microsoft Edge (Warisan) Internet Explorer Pejabat Lain-lain Pai raspberi kamera web pemain media cPanel haproxy but agung Ubuntu 24.04 nextcloud kebajikan usb-laluan #secure-boot laluan-peranti SDN pemasangan pemandu Jawatan Popular Bagaimana untuk menyemak ruang cakera dalam Ubuntu Lain-lain 6 Pembetulan untuk Ikon Bunyi Hilang Dari Windows (2022) Lain-lain Cara Menggunakan while Loop dalam C++ Lain-lain Cara Menangkap dan Menganalisis Paket dengan Contoh dengan Tcpdump Lain-lain Program C# untuk Mencari Punca Kuasa Dua Nombor Lain-lain Kamus Pickle dalam Python Lain-lain Cara Merakam Skrin pada TikTok pada Android Lain-lain Senarai Git Fail Baharu/Diubahsuai/Dipadam Lain-lain Apakah cbrt dalam C++? Lain-lain 6 Pembetulan: Tidak Dapat Tetapkan Chrome sebagai Penyemak Imbas Lalai Windows 10 Lain-lain Pembekal Terraform Lain-lain Bagaimana untuk Mengekstrak Fail RAR secara Percuma pada Windows dan Mac? Lain-lain Bagaimana Menggunakan Not Equal dalam MATLAB? Lain-lain Cara Membuat Ramuan DaBaby Arms dalam Roblox Wacky Wizards Lain-lain Cara Menukar Nisbah Aspek dalam Pertengahan Perjalanan Lain-lain Dan C++ Lain-lain Cara Menjalankan ChatGPT pada Raspberry Pi Lain-lain Cara Menggunakan 'Apt Install' untuk Memasang Versi Khusus Pakej di Linux Lain-lain Apa yang Dilakukan oleh Ekspresi href Lain-lain Bagaimana untuk Menunjukkan Perubahan Tanpa Komitmen dalam Git dan Beberapa Git berbeza secara Terperinci? Lain-lain

. Teg

untuk mengisi lajur dengan data.

Teg

kedua mewakili elemen butang yang digunakan dengan CSS “ kursor ” harta dengan nilai yang berbeza.

Kod HTML untuk senario di atas diberikan di bawah:

< meja >
< tr >
< ke gaya = 'lebar: 200px;' > pemilih kursor css ke >
< ke gaya = 'lebar: 200px;' > gaya kursor ke >
tr >
< tr >
< td > kursor: penunjuk td >
< td >< butang gaya = 'kursor: penunjuk;' > penunjuk butang > td >
tr >
< tr >
< td > kursor: kemajuan td >
< td >< butang gaya = 'kursor: kemajuan;' > kemajuan butang > td >
tr >
< tr >
< td > kursor: tidak dibenarkan td >
< td >< butang gaya = 'kursor: tidak dibenarkan;' > tidak dibenarkan butang > td >
tr >
< tr >
< td > kursor: tiada td >
< td >< butang gaya = 'kursor: tiada;' > tiada butang > td >
tr >
< tr >
< td > kursor: bergerak td >
< td >< butang gaya = 'kursor: gerakkan;' > bergerak butang > td >
tr >
< tr >
< td > kursor: ambil td >
< td >< butang gaya = 'kursor: ambil;' > merebut butang > td >
tr >
< tr >
< td > kursor: salinan td >
< td >< butang gaya = 'kursor: salin;' > salinan butang > td >
tr >
< tr >
< td > kursor: saiz semula col td >
< td >< butang gaya = 'kursor: col-resize;' > saiz semula col butang > td >
tr >
< tr >
< td > kursor: ubah saiz baris td >
< td >< butang gaya = 'kursor: row-resize;' > ubah saiz baris butang > td >
tr >
< tr >
< td > kursor: teks td >
< td >< butang gaya = 'kursor: teks;' > teks butang > td >
tr >
meja >

Kod di atas akan menghasilkan hasil berikut:

Dalam bahagian seterusnya, kami akan menggunakan gaya yang berbeza pada elemen HTML.

Gayakan 'semua' Elemen

* {
padding: 0 ;
margin: 0 ;
jenis huruf: Arial, Helvetica, sans-serif;
}

Semua elemen HTML digunakan dengan gaya CSS yang diterangkan di bawah:

- “ padding ” harta dengan “ 0 nilai ” tidak termasuk ruang di sekeliling kandungan elemen.
- “ margin ” harta dengan “ 0 nilai ” tidak menambah ruang di luar setiap elemen.
- “ font-family 'harta benda diberi nilai' Arial, Helvetica, sans-serif ”. Senarai gaya fon diberikan untuk memastikan jika gaya pertama tidak disokong oleh pelayar, gaya lain mesti digunakan.

Elemen 'jadual' gaya

meja {
margin: 0px auto;
sempadan: 1px gainsboro pepejal;
}

Elemen jadual HTML digunakan dengan sifat CSS yang diterangkan di bawah:

- “ sempadan ' harta ditetapkan dengan nilai ' 1px gainsboro pepejal ” yang masing-masing mewakili lebar jidar, gaya jidar dan warna jidar.

“ margin ” harta berkelakuan seperti yang dinyatakan di atas.

Gaya Elemen 'td'.

td {
text-align: tengah;
}

Elemen

digunakan dengan sifat “ penjajaran teks 'dengan nilai' pusat ”. Ia akan menjajarkan teks lajur di tengah.

Elemen 'butang' gaya

butang {
warna latar belakang: biru kadet;
padding: 10px 10px;
warna: #ffffff;
lebar: 150px;
}

Elemen butang yang digunakan dalam kod HTML di atas digayakan dengan sifat CSS baharu yang diterangkan di bawah:

- “ warna latar belakang ” menentukan warna pada latar belakang elemen.
- “ padding ” dengan nilai yang ditetapkan sebagai “ 10px 10px ” menambah ruang 10px di bahagian atas-bawah dan 10px di sebelah kiri-kanan item elemen.
- “ warna ” melaraskan warna fon elemen.
- “ lebar ” ialah sifat yang melaraskan lebar elemen.

Kod di atas akan menghasilkan hasil berikut:

Setakat ini, kami telah membincangkan kursor yang disediakan oleh CSS. Dalam bahagian yang akan datang, contoh akan menerangkan cara membuat kursor tersuai dengan CSS.

CSS kursor tersuai

Pembangun mesti menggunakan kursor yang sesuai untuk aplikasi mereka. Kursor harus dibuat menarik untuk menarik perhatian pengguna. Selain itu, kursor tersuai boleh dibuat untuk tujuan ini.

Lihat contoh di bawah!

Contoh: Bagaimana untuk Mencipta Kursor Tersuai dengan CSS?

Dalam HTML, tambahkan dua elemen div. Satu dengan kelas ' bulatan 'dan yang lain dengan kelas' titik ”.

HTML

< div kelas = 'bulatan' > div >
< div kelas = 'titik' > div >

Mari teruskan ke bahagian CSS.

Elemen 'badan' gaya

badan {
ketinggian: 100vh;
}

Elemen badan fail HTML digunakan dengan gaya “ ketinggian ” harta untuk menetapkan ketinggian elemen.

Gaya 'bulatan' div

.bulatan {
lebar: 20px;
ketinggian: 20px;
sempadan: 2px putih pepejal;
jejari sempadan: lima puluh % ;
}

Di bawah ialah penjelasan sifat CSS yang digunakan pada elemen div yang mempunyai kelas ' bulatan ”:

- “ lebar ” harta melaraskan lebar elemen.
- “ sempadan harta ” dengan nilai yang dinyatakan sebagai “ 2px putih pepejal ” mewakili lebar jidar, gaya jidar dan warna.
- “ jejari sempadan ” harta mengubah pusingan sempadan elemen.

Gaya 'titik' div

.titik {
lebar: 5px;
ketinggian: 5px;
warna latar belakang: putih;
jejari sempadan: lima puluh % ;
}

Elemen div dengan titik kelas disediakan dengan sifat berbeza yang diterangkan di bawah:

- “ warna latar belakang sifat ” menentukan warna latar belakang elemen.
- “ jejari sempadan ” menetapkan bulatan tepi elemen.
- Ciri-ciri lain akan berfungsi sama seperti yang dibincangkan.

Kod yang diberikan akan memaparkan kursor berikut pada halaman web:

Kami telah mencipta kursor menggunakan HTML dan CSS. Sekarang, dalam bahagian seterusnya, kod JavaScript ditulis untuk menambah fungsi yang diperlukan pada kursor.

JavaScript

< skrip >
const cursorCircle = document.querySelector ( '.bulatan' ) ;
const cursorPoint = document.querySelector ( '.titik' ) ;
const moveCursor = ( dan ) = > {
const mouseY = e.clientY;
const mouseX = e.clientX;

cursorCircle.style.transform = ` menterjemah ( ${mouseX} px, ${mouseY} px ) ` ;
cursorPoint.style.transform = ` menterjemah ( ${mouseX} px, ${mouseY} px ) ` ;
}
window.addEventListener ( 'mousemove' , gerakkanKursor )
skrip >

Penerangan kod JavaScript di atas diberikan di bawah:

- “ teg ” dipasangkan dengan teg , yang digunakan untuk menulis kod JavaScript.
- “ const ” kata kunci mengenal pasti bahawa kata kunci const diikuti oleh pembolehubah tidak boleh ditetapkan semula.
- “ document.querySelector(‘.circle’) ” mengembalikan elemen div bulatan yang sepadan dengan pemilih yang ditentukan dalam dokumen.
- “ document.querySelector(‘.point’) ” mengembalikan elemen div titik yang sepadan dengan pemilih yang ditentukan dalam dokumen.
- “ const moveCursor = (e) => ” fungsi ini menentukan fungsi kursor.
- “ e.klienY ” mengembalikan koordinat menegak apabila peristiwa tetikus dicetuskan.
- “ e.clientX ” mengembalikan koordinat mendatar apabila peristiwa tetikus dicetuskan.
- “ cursorCircle.style.transform ” div bulatan digunakan dengan perubahan gaya.
- “ cursorPoint.style.transform ” titik div digunakan dengan perubahan gaya.
- “ terjemah(${mouseX}px, ${mouseY}px) ” nilai sifat transformasi menetapkan koordinat mendatar dan menegak.
- “ window.addEventListener('mouse', moveCursor) ” kaedah pendengar acara akan mendengar pergerakan tetikus. Ia adalah sebahagian daripada objek tetingkap global.

Selepas menyediakan blok kod di atas, kursor akan bergerak secara automatik pada skrin seperti yang ditunjukkan di bawah:

Itu hebat! Kami telah mencipta kursor tersuai dengan sifat CSS yang berbeza.

Kesimpulan

CSS ' kursor Harta ” mempunyai banyak nilai yang menunjukkan pelbagai gaya kursor. Walau bagaimanapun, dengan menggunakan elemen HTML dan sifat CSS, kami boleh membuat kursor tersuai. Kemudian, kod JavaScript dilaksanakan untuk mengaktifkan fungsinya. Kajian ini telah menunjukkan cara membuat kursor CSS tersuai dengan contoh praktikal.

Kursor CSS tersuai

kursor CSS

CSS kursor tersuai

Kesimpulan

Kategori

Jawatan Popular