V CSS se za različne elemente HTML uporabljajo različne vrste kazalcev, za spreminjanje vrste kazalca pa uporabite » kazalec ” lastnina se uporablja. Omogoča vam, da spremenite vrsto kazalca in nastavite vrednost kazalca, ki jo želite prikazati na zaslonu. Kot dodatna funkcija vam omogoča tudi nastavitev lastne slike kazalca.

V tem priročniku se boste naučili:

• Kaj je lastnost CSS kazalca
• Kako spremeniti kazalec v sliko pri hoverju s pomočjo CSS

Torej, začnimo!

Kaj je lastnost CSS »kurzor«?

Če želite nadzorovati videz miške nad elementom HTML, uporabite » kazalec ” se lahko uporabi lastnost CSS. Omogoča spreminjanje običajnega kazalca v različne vrste, kot so kazalec za kopiranje, ročni kazalec, prijem in še veliko več. Kazalec po meri lahko nastavite tudi tako, da v lastnosti kazalca nastavite URL slike.

Sintaksa

Sintaksa lastnosti kazalca je podana kot:

V zgornji sintaksi dodelite pot slike v ' url() «, ki ga želite prikazati na zaslonu.

Zdaj se bomo premaknili na primer, da običajni kazalec spremenimo v sliko ob lebdenju.

Kako spremeniti kazalec v sliko pri lebdenju s CSS?

Če želite ob premikanju kazalca spremeniti v sliko, najprej dodajte element v HTML.

1. primer: Spreminjanje kazalca v sliko ob lebdenju z uporabo lastnosti kazalca

Ustvarili bomo naslov

in ime razreda gumba “ btn ”.

HTML

< telo >
< h1 > Spremenite kazalec v sliko ob lebdenju h1 >
< gumb razred = 'btn' > Kliknite Jaz gumb >
telo >

Trenutno se bo s kazalcem miške na gumb prikazal privzeti kazalec:

Zdaj se premaknite na CSS in spremenite kazalec na sliko.

Nato nastavite pot slike v ' url() ”. Na primer, določili smo 'i z.svg ” kot našo izbrano sliko. Nato nastavite vrednost lastnosti kazalca kot ' avto ”.

CSS

.btn {
kazalec: url ( icon.svg ) , avto;
oblazinjenje: 10px;
}

Shranite zgornjo kodo in izvedite datoteko HTML, da vidite naslednji rezultat:

Podani izhod označuje, da se je kazalec ob lebdenju uspešno spremenil v sliko.

Opomba: “ avto ” se uporablja kot alternativna možnost v lastnosti kazalca; ko se slika ne naloži ali manjka pot do datoteke ali sama datoteka, je zaradi samodejne vrednosti na zaslonu prikazana privzeta ikona.

2. primer: Nastavitev privzetega kazalca pri lebdenju

Na primer, dali bomo url slike in nastavili samo vrednost lastnosti kazalca kot ' avto ”:

kazalec: url ( ) , avto;

Posledično se kazalec ne bo spremenil, ko premaknete miškin kazalec nad gumb:

3. primer: nastavitev alternative slike pri lebdenju

Namesto samodejnega lahko nastavite različne vrednosti kazalca, ki ga želite prikazati kot alternativo sliki. Na primer, spremenili bomo vrednost lastnosti kazalca iz ' avto ' do ' kazalec ”:

kazalec: url ( ) , kazalec;

Kot lahko vidite v spodnjem rezultatu, se kazalec spremeni v kazalec roke, ko lebdi nad gumbom:

Zagotovili smo najlažji način za spreminjanje slike kazalca ob lebdenju s pomočjo CSS.

Zaključek

V CSS lahko spremenite kazalec v sliko, ko lebdite s kazalcem kazalec ” lastnina. Omogoča spreminjanje običajnega kazalca v sliko z dodelitvijo » url ” slike v lastnost kazalca. Uporabite lahko katero koli vrsto kazalca, ki ga želite prikazati, ko lebdi na elementu. Ta članek je prikazal način spreminjanja kazalca v ročni kazalec.