Kazalec CSS po meri

Kazalec označuje položaj na zaslonu, kjer lahko uporabnik klikne ali vnese besedilo. Za različne komponente spletnega mesta se lahko uporabljajo različni kazalci. Razvijalec mora zagotoviti, da morajo biti kazalci, uporabljeni v aplikaciji, privlačni. Na primer, kazalec z roko lahko uporabite na gumbu med lebdenjem miške. Indikator besedila (utripajoča vrstica) se uporablja v besedilnem polju, kamor je treba vnesti besedilo.

V CSS obstaja več slogov kazalcev, ki se uporabljajo samo z določitvijo vrednosti lastnosti kazalca. Vendar pa lahko razvijalec ustvari prilagojen kazalec s pomočjo CSS.

Ta študijski vodnik bo zagotovil:

- Kazalec CSS
- CSS kazalca po meri

Preden se lotimo teme, si oglejmo nekaj oblik kazalcev CSS s praktičnim primerom.

Kazalec CSS

CSS ' kazalec Lastnost ima različne vrednosti, kot so kazalec, nič, napredek itd. Ustvarimo tabelo, ki vsebuje vrstice, na katerih bodo ob lebdenju miške prikazani različni kazalci.

Primer: Ustvarjanje tabele, ki predstavlja različne kazalke CSS v HTML

Najprej dodajte element

v HTML. Znotraj tega elementa:

- Oznaka

bo uporabljena za izdelavo vrstic.

Prva vrstica vsebuje naslove.

Ti naslovi so določeni z uporabo oznak

vsebujejo dve oznaki

. Druge oznake
za zapolnitev stolpcev s podatki. Druga oznaka	predstavlja elemente gumbov, ki so uporabljeni s CSS “ kazalec ” lastnost z različnimi vrednostmi. Koda HTML za zgornji scenarij je navedena spodaj: < tabela > < tr > < th stil = 'širina: 200 slikovnih pik;' > izbirnik kazalca css th > < th stil = 'širina: 200 slikovnih pik;' > slog kazalca th > tr > < tr > < td > kazalec: kazalec td > < td >< gumb stil = 'kurzor: kazalec;' > kazalec gumb > td > tr > < tr > < td > kazalec: napredek td > < td >< gumb stil = 'kurzor: napredek;' > napredek gumb > td > tr > < tr > < td > kazalec: ni dovoljeno td > < td >< gumb stil = 'kurzor: ni dovoljeno;' > ni dovoljeno gumb > td > tr > < tr > < td > kazalec: brez td > < td >< gumb stil = 'kurzor: nič;' > nič gumb > td > tr > < tr > < td > kazalec: premakni td > < td >< gumb stil = 'kurzor: premakni;' > premakniti gumb > td > tr > < tr > < td > kazalec: zgrabi td > < td >< gumb stil = 'kurzor: zgrabi;' > zgrabi gumb > td > tr > < tr > < td > kazalec: kopiraj td > < td >< gumb stil = 'kurzor: kopiraj;' > kopirati gumb > td > tr > < tr > < td > kazalec: spremeni velikost v barvi td > < td >< gumb stil = 'kurzor: col-spreminjanje velikosti;' > col-spreminjanje velikosti gumb > td > tr > < tr > < td > kazalec: spreminjanje velikosti vrstice td > < td >< gumb stil = 'kurzor: sprememba velikosti vrstice;' > spreminjanje velikosti vrstice gumb > td > tr > < tr > < td > kazalec: besedilo td > < td >< gumb stil = 'kurzor: besedilo;' > besedilo gumb > td > tr > tabela > Zgornja koda bo ustvarila naslednji rezultat: V naslednjem razdelku bomo za elemente HTML uporabili različne sloge. Slog 'vseh' elementov * { oblazinjenje: 0 ; rob: 0 ; družina pisav: Arial, Helvetica, sans-serif; } Vsi elementi HTML so uporabljeni s slogi CSS, ki so razloženi spodaj: “ oblazinjenje » lastnina z « 0 ” vrednost ne vključuje presledka okoli vsebine elementa. “ marža » lastnina z « 0 ” ne doda prostora zunaj vsakega od elementov. “ družina pisav »lastini je dodeljena vrednost« Arial, Helvetica, sans-serif ”. Seznam slogov pisave je podan, da se zagotovi, da je treba uporabiti druge sloge, če brskalnik ne podpira prvega sloga. Element sloga 'tabela'. tabela { rob: 0px samodejno; obroba: 1px polna gainsboro; } Element tabele HTML je uporabljen z lastnostmi CSS, ki so opisane spodaj: “ meja Lastnost je nastavljena z vrednostjo 1px trdni gainsboro «, ki predstavlja širino obrobe, slog obrobe in barvo obrobe. “ marža ” lastnost se obnaša, kot je navedeno zgoraj. Element sloga 'td'. td { poravnava besedila: sredina; } Element	je uporabljen z lastnostjo “ poravnava besedila ' z vrednostjo ' center ”. Poravnal bo besedilo stolpca na sredino. Element sloga 'gumb'. gumb { barva ozadja: kadetsko modra; oblazinjenje: 10px 10px; barva: #ffffff; širina: 150px; } Element gumba, uporabljen v zgornji kodi HTML, je oblikovan z novimi lastnostmi CSS, ki so razložene spodaj: “ Barva ozadja ” določa barvo ozadja elementa. “ oblazinjenje « z vrednostmi, dodeljenimi kot » 10px 10px ” doda prostor 10 slikovnih pik na vrhu-spodaj in 10 slikovnih pik na levi in desni strani elementov elementa. “ barva ” prilagodi barvo pisave elementa. “ premer ” je lastnost, ki prilagaja širino elementa. Zgornja koda bo ustvarila naslednji rezultat: Doslej smo razpravljali o kazalcih, ki jih ponuja CSS. V naslednjem razdelku bo primer opisal, kako ustvariti kazalec po meri s CSS. CSS kazalca po meri Razvijalci morajo uporabljati ustrezne kazalce za svoje aplikacije. Kazalci morajo biti privlačni, da pritegnejo pozornost uporabnikov. Poleg tega je v ta namen mogoče ustvariti kazalec po meri. Poglejte si spodnji primer! Primer: Kako ustvariti kazalec po meri s CSS? V HTML dodajte dva elementa div. Eden z razredom ' krog ' in drugi z razredom ' točka ”. HTML < div razred = 'krog' > div > < div razred = 'točka' > div > Pojdimo naprej proti razdelku CSS. Element sloga 'telo'. telo { višina: 100vh; } Element telesa datoteke HTML je uporabljen s slogom ' višina ” lastnost za nastavitev višine elementa. Slog 'krog' div .krog { širina: 20px; višina: 20px; obroba: 2px polna bela; mejni polmer: petdeset % ; } Spodaj je razlaga lastnosti CSS, ki se uporabljajo za element div z razredom ' krog ”: “ premer Lastnost prilagodi širino elementa. “ meja ' lastnost z vrednostjo, navedeno kot ' 2px trdno bela ” predstavlja širino obrobe, slog obrobe in barvo. “ mejni polmer ” lastnost spremeni obrobo elementa. Slog 'point' div .točka { širina: 5px; višina: 5px; barva ozadja: bela; mejni polmer: petdeset % ; } Element div s točko razreda ima različne lastnosti, ki so opisane spodaj: “ Barva ozadja ” lastnost določa barvo ozadja elementa. “ mejni polmer ” zaokroži robove elementa. Druge lastnosti bodo delovale enako, kot je opisano. Podana koda bo na spletni strani prikazala naslednji kazalec: Kazalec smo ustvarili z uporabo HTML in CSS. Zdaj je v naslednjem razdelku napisana koda JavaScript za dodajanje zahtevane funkcije kazalcu. JavaScript < scenarij > const cursorCircle = document.querySelector ( '.krog' ) ; const cursorPoint = document.querySelector ( '.točka' ) ; const premikCursor = ( in ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` prevesti ( ${mouseX} px, ${mouseY} px ) ` ; cursorPoint.style.transform = ` prevesti ( ${mouseX} px, ${mouseY} px ) ` ; } window.addEventListener ( 'mousemove' , premakni kazalec ) scenarij > Opis zgornje kode JavaScript je podan spodaj: “ ” je povezana z oznako , ki se uporablja za pisanje kode JavaScript. “ konst ” ključna beseda označuje, da ključne besede const, ki ji sledi spremenljivka, ni mogoče znova dodeliti. “ document.querySelector('.circle') ” vrne element div kroga, ki se ujema z navedenim izbirnikom v dokumentu. “ document.querySelector('.point') ” vrne točkovni element div, ki se ujema s podanim izbirnikom v dokumentu. “ const premikCursor = (e) => ” ta funkcija določa funkcijo kazalca. “ e.clientY ” vrne navpično koordinato, ko je bil sprožen dogodek miške. “ e.clientX ” vrne vodoravno koordinato, ko se sproži dogodek miške. “ cursorCircle.style.transform ” se krog div uporabi s preoblikovanjem sloga. “ cursorPoint.style.transform ” točka div je uporabljena s transformacijo sloga. “ prevedi (${mouseX}px, ${mouseY}px) ” vrednost lastnosti transformacije nastavi vodoravne in navpične koordinate. “ window.addEventListener('miška', premakni kazalec) ” metoda poslušalca dogodkov bo poslušala premikanje miške. Je del globalnega okenskega objekta. Po zagotavljanju zgornjih blokov kode se bo kazalec samodejno premaknil na zaslonu, kot je prikazano spodaj: To je kul! Ustvarili smo kazalec po meri z različnimi lastnostmi CSS. Zaključek CSS ' kazalec Lastnost ima številne vrednosti, ki označujejo različne sloge kazalcev. Vendar pa lahko z uporabo elementov HTML in lastnosti CSS izdelamo kazalce po meri. Nato se implementira koda JavaScript za aktiviranje njegove funkcionalnosti. Ta študija je s praktičnim primerom pokazala, kako ustvariti kazalce CSS po meri. drugo Kategorija Malina Pi Ethernet Drugo Nano Povečavo Cimet Ocene Zorinos Radio Minecraft Ssh Openvas Stiskanje Laravel Zračna Razpoka Programska Oprema Za Pisarniško Produktivnost Zagon Sistemski Klici Sysctl Mreženje Gpu Gimp Plex Uefi Docker Požarni Zid Žica Sinoniologija Pdf Ethereum Os Papiga Vzvišeno Selinux Hiper-V Telefon Koda Gnome Poslastica Miško Nmap Metasploit Hudournik Tablični Računalnik Pycharm Curl Kje Gcc Pisave Ssl Nvidia Slike Usb Lignji Kolega Vlc Media Player Dns Bitcoin Tipkovnico Inkscape Šifriranje Fedora Owncloud Skener Atom Rdeč Klobuk Teamviewer Skype Vpn Xfce Beležnica Jupyter Nfs Spletni Dnevnik Lvm Suse Medijski Predvajalniki Posix Pare Jenkins Moč Oracle Linux Netstat M2 Bluetooth Ssd Oprijem Gentoo Odiseja Zvok Procesor Tenzorski Tok Autodesk Lubuntu Llvm Windows Microsoft Edge (Zapuščina) Internet Explorer Pisarna drugo Spletna kamera medijski predvajalniki cPanel haproxy škorenj vzvišeno Ubuntu 24.04 nextcloud vrlina usb-prehod #varni zagon Priljubljene Objave Posredovanje več vrednosti enemu parametru skripta PowerShell drugo Kako pretvoriti decimalno v binarno v C drugo 5 popravkov za napako Werfault.exe v sistemu Windows drugo Kako uporabljati Rufus v Linuxu drugo Cassandra Run kot storitev Windows drugo Kako uporabiti prekinitev in nadaljevanje v PHP? drugo Kako najti naravne logaritme v MATLAB-u s funkcijo log(). drugo Kako je AWS uporabil ML, da je Amazonovim centrom za izpolnjevanje pomagal zmanjšati čas nedelovanja? drugo Kako omogočiti gostujočega agenta QEMU na virtualnem stroju Proxmox VE drugo Najboljši ID-ji nalepk Roblox – 2023 drugo Preštejte različne kombinacije v več stolpcih v SQL drugo Kako nastaviti in odpreti Windows Pripovedovalec drugo Kako pretvoriti niz v logično vrednost v JavaScriptu drugo Kako namestiti FlashArch – Adobe Flash SWF Player na Linux Mint drugo Kako uporabljati pogovorni grafikon znanja v LangChainu? drugo C++ std: poljubni primeri drugo Operator MongoDB $Min drugo Hitro preklopite med HKCU in HKLM v urejevalniku registra - Winhelponline Windows Kako blokirati ali dovoliti pojavna okna v Chromu v sistemu Android drugo Kako narediti Git privzeto na SSH in ne na HTTPS za nove repozitorije drugo

. Druge oznake

za zapolnitev stolpcev s podatki.

Druga oznaka

predstavlja elemente gumbov, ki so uporabljeni s CSS “ kazalec ” lastnost z različnimi vrednostmi.

Koda HTML za zgornji scenarij je navedena spodaj:

< tabela >
< tr >
< th stil = 'širina: 200 slikovnih pik;' > izbirnik kazalca css th >
< th stil = 'širina: 200 slikovnih pik;' > slog kazalca th >
tr >
< tr >
< td > kazalec: kazalec td >
< td >< gumb stil = 'kurzor: kazalec;' > kazalec gumb > td >
tr >
< tr >
< td > kazalec: napredek td >
< td >< gumb stil = 'kurzor: napredek;' > napredek gumb > td >
tr >
< tr >
< td > kazalec: ni dovoljeno td >
< td >< gumb stil = 'kurzor: ni dovoljeno;' > ni dovoljeno gumb > td >
tr >
< tr >
< td > kazalec: brez td >
< td >< gumb stil = 'kurzor: nič;' > nič gumb > td >
tr >
< tr >
< td > kazalec: premakni td >
< td >< gumb stil = 'kurzor: premakni;' > premakniti gumb > td >
tr >
< tr >
< td > kazalec: zgrabi td >
< td >< gumb stil = 'kurzor: zgrabi;' > zgrabi gumb > td >
tr >
< tr >
< td > kazalec: kopiraj td >
< td >< gumb stil = 'kurzor: kopiraj;' > kopirati gumb > td >
tr >
< tr >
< td > kazalec: spremeni velikost v barvi td >
< td >< gumb stil = 'kurzor: col-spreminjanje velikosti;' > col-spreminjanje velikosti gumb > td >
tr >
< tr >
< td > kazalec: spreminjanje velikosti vrstice td >
< td >< gumb stil = 'kurzor: sprememba velikosti vrstice;' > spreminjanje velikosti vrstice gumb > td >
tr >
< tr >
< td > kazalec: besedilo td >
< td >< gumb stil = 'kurzor: besedilo;' > besedilo gumb > td >
tr >
tabela >

Zgornja koda bo ustvarila naslednji rezultat:

V naslednjem razdelku bomo za elemente HTML uporabili različne sloge.

Slog 'vseh' elementov

* {
oblazinjenje: 0 ;
rob: 0 ;
družina pisav: Arial, Helvetica, sans-serif;
}

Vsi elementi HTML so uporabljeni s slogi CSS, ki so razloženi spodaj:

- “ oblazinjenje » lastnina z « 0 ” vrednost ne vključuje presledka okoli vsebine elementa.
- “ marža » lastnina z « 0 ” ne doda prostora zunaj vsakega od elementov.
- “ družina pisav »lastini je dodeljena vrednost« Arial, Helvetica, sans-serif ”. Seznam slogov pisave je podan, da se zagotovi, da je treba uporabiti druge sloge, če brskalnik ne podpira prvega sloga.

Element sloga 'tabela'.

tabela {
rob: 0px samodejno;
obroba: 1px polna gainsboro;
}

Element tabele HTML je uporabljen z lastnostmi CSS, ki so opisane spodaj:

- “ meja Lastnost je nastavljena z vrednostjo 1px trdni gainsboro «, ki predstavlja širino obrobe, slog obrobe in barvo obrobe.

“ marža ” lastnost se obnaša, kot je navedeno zgoraj.

Element sloga 'td'.

td {
poravnava besedila: sredina;
}

Element

je uporabljen z lastnostjo “ poravnava besedila ' z vrednostjo ' center ”. Poravnal bo besedilo stolpca na sredino.

Element sloga 'gumb'.

gumb {
barva ozadja: kadetsko modra;
oblazinjenje: 10px 10px;
barva: #ffffff;
širina: 150px;
}

Element gumba, uporabljen v zgornji kodi HTML, je oblikovan z novimi lastnostmi CSS, ki so razložene spodaj:

- “ Barva ozadja ” določa barvo ozadja elementa.
- “ oblazinjenje « z vrednostmi, dodeljenimi kot » 10px 10px ” doda prostor 10 slikovnih pik na vrhu-spodaj in 10 slikovnih pik na levi in desni strani elementov elementa.
- “ barva ” prilagodi barvo pisave elementa.
- “ premer ” je lastnost, ki prilagaja širino elementa.

Zgornja koda bo ustvarila naslednji rezultat:

Doslej smo razpravljali o kazalcih, ki jih ponuja CSS. V naslednjem razdelku bo primer opisal, kako ustvariti kazalec po meri s CSS.

CSS kazalca po meri

Razvijalci morajo uporabljati ustrezne kazalce za svoje aplikacije. Kazalci morajo biti privlačni, da pritegnejo pozornost uporabnikov. Poleg tega je v ta namen mogoče ustvariti kazalec po meri.

Poglejte si spodnji primer!

Primer: Kako ustvariti kazalec po meri s CSS?

V HTML dodajte dva elementa div. Eden z razredom ' krog ' in drugi z razredom ' točka ”.

HTML

< div razred = 'krog' > div >
< div razred = 'točka' > div >

Pojdimo naprej proti razdelku CSS.

Element sloga 'telo'.

telo {
višina: 100vh;
}

Element telesa datoteke HTML je uporabljen s slogom ' višina ” lastnost za nastavitev višine elementa.

Slog 'krog' div

.krog {
širina: 20px;
višina: 20px;
obroba: 2px polna bela;
mejni polmer: petdeset % ;
}

Spodaj je razlaga lastnosti CSS, ki se uporabljajo za element div z razredom ' krog ”:

- “ premer Lastnost prilagodi širino elementa.
- “ meja ' lastnost z vrednostjo, navedeno kot ' 2px trdno bela ” predstavlja širino obrobe, slog obrobe in barvo.
- “ mejni polmer ” lastnost spremeni obrobo elementa.

Slog 'point' div

.točka {
širina: 5px;
višina: 5px;
barva ozadja: bela;
mejni polmer: petdeset % ;
}

Element div s točko razreda ima različne lastnosti, ki so opisane spodaj:

- “ Barva ozadja ” lastnost določa barvo ozadja elementa.
- “ mejni polmer ” zaokroži robove elementa.
- Druge lastnosti bodo delovale enako, kot je opisano.

Podana koda bo na spletni strani prikazala naslednji kazalec:

Kazalec smo ustvarili z uporabo HTML in CSS. Zdaj je v naslednjem razdelku napisana koda JavaScript za dodajanje zahtevane funkcije kazalcu.

JavaScript

< scenarij >
const cursorCircle = document.querySelector ( '.krog' ) ;
const cursorPoint = document.querySelector ( '.točka' ) ;
const premikCursor = ( in ) = > {
const mouseY = e.clientY;
const mouseX = e.clientX;

cursorCircle.style.transform = ` prevesti ( ${mouseX} px, ${mouseY} px ) ` ;
cursorPoint.style.transform = ` prevesti ( ${mouseX} px, ${mouseY} px ) ` ;
}
window.addEventListener ( 'mousemove' , premakni kazalec )
scenarij >

Opis zgornje kode JavaScript je podan spodaj:

- “ ” je povezana z oznako , ki se uporablja za pisanje kode JavaScript.
- “ konst ” ključna beseda označuje, da ključne besede const, ki ji sledi spremenljivka, ni mogoče znova dodeliti.
- “ document.querySelector('.circle') ” vrne element div kroga, ki se ujema z navedenim izbirnikom v dokumentu.
- “ document.querySelector('.point') ” vrne točkovni element div, ki se ujema s podanim izbirnikom v dokumentu.
- “ const premikCursor = (e) => ” ta funkcija določa funkcijo kazalca.
- “ e.clientY ” vrne navpično koordinato, ko je bil sprožen dogodek miške.
- “ e.clientX ” vrne vodoravno koordinato, ko se sproži dogodek miške.
- “ cursorCircle.style.transform ” se krog div uporabi s preoblikovanjem sloga.
- “ cursorPoint.style.transform ” točka div je uporabljena s transformacijo sloga.
- “ prevedi (${mouseX}px, ${mouseY}px) ” vrednost lastnosti transformacije nastavi vodoravne in navpične koordinate.
- “ window.addEventListener('miška', premakni kazalec) ” metoda poslušalca dogodkov bo poslušala premikanje miške. Je del globalnega okenskega objekta.

Po zagotavljanju zgornjih blokov kode se bo kazalec samodejno premaknil na zaslonu, kot je prikazano spodaj:

To je kul! Ustvarili smo kazalec po meri z različnimi lastnostmi CSS.

Zaključek

CSS ' kazalec Lastnost ima številne vrednosti, ki označujejo različne sloge kazalcev. Vendar pa lahko z uporabo elementov HTML in lastnosti CSS izdelamo kazalce po meri. Nato se implementira koda JavaScript za aktiviranje njegove funkcionalnosti. Ta študija je s praktičnim primerom pokazala, kako ustvariti kazalce CSS po meri.

Kazalec CSS po meri

Kazalec CSS

CSS kazalca po meri

Zaključek

Kategorija

Priljubljene Objave