CSS-is kasutatakse erinevate HTML-elementide jaoks erinevat tüüpi kursoreid ja kursori tüübi muutmiseks kasutatakse „ kursor ” kinnisvara kasutatakse. See võimaldab teil muuta kursori tüüpi ja määrata kursori väärtuse, mida soovite ekraanil kuvada. Lisafunktsioonina võimaldab see määrata ka oma kursori kujutise.

Sellest juhendist saate teada:

• Mis on kursori CSS-i atribuut
• Kuidas muuta kursor CSS-i abil hõljukil pildiks

Niisiis, alustame!

Mis on 'kursori' CSS-i atribuut?

Hiire ilmumise juhtimiseks HTML-elemendi kohal, kursor ” saab kasutada CSS-i atribuuti. See võimaldab muuta tavalist kursorit erinevateks tüüpideks, nagu kopeerimiskursor, käsikursor, haaramine ja palju muud. Saate määrata ka oma kohandatud kursori, määrates kursori atribuudis pildi URL-i.

Süntaks

Kursori atribuudi süntaks on esitatud järgmiselt:

Ülaltoodud süntaksis määrake pildi tee jaotises ' url() ', mida soovite ekraanil kuvada.

Liigume nüüd näite juurde, et muuta tavaline kursor kursoril olevaks pildiks.

Kuidas muuta kursor CSS-i abil hõljukil pildiks?

Kursori muutmiseks kursoril olevaks pildiks lisage esmalt HTML-i element.

Näide 1: kursori muutmine pildiks hõljukil, kasutades kursori atribuuti

Loome pealkirja

ja nupu klassi nime ' btn ”.

HTML

< keha >
< h1 > Muutke kursor kursoriks Kujutis hõljukil h1 >
< nuppu klass = 'btn' > Klõpsake Mina nuppu >
keha >

Praegu kuvatakse nupule hõljutades vaikekursorit:

Nüüd liikuge CSS-i ja viige kursor pildile.

Seejärel määrake pildi tee jaotises ' url() ”. Näiteks oleme täpsustanud „i with.svg ” meie valitud pildina. Seejärel määrake kursori atribuudi väärtuseks ' auto ”.

CSS

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

Salvestage ülaltoodud kood ja käivitage HTML-fail, et näha järgmist tulemust:

Antud väljund näitab, et kursor on edukalt muudetud kursoril olevaks pildiks.

Märge: “ auto ” kasutatakse alternatiivse võimalusena kursori atribuudis; kui pilti ei laadita või failitee või fail ise puudub, kuvatakse automaatse väärtuse tõttu ekraanil vaikeikoon.

Näide 2: vaikekursori seadistamine hõljutusrežiimile

Näiteks anname pildi URL-i ja määrame ainult kursori atribuudi väärtuseks ' auto ”:

kursor: url ( ) , auto;

Selle tulemusena ei muutu kursor, kui hõljutate kursorit nupu kohal:

Näide 3: Kujutise alternatiivi seadistamine hõljutamisel

Auto asemel saate määrata kursori erinevad väärtused, mida soovite pildi alternatiivina kuvada. Näiteks muudame kursori atribuudi väärtust ' auto ' kuni ' osuti ”:

kursor: url ( ) , osuti;

Nagu näete allolevast väljundist, muudetakse kursor käekursoriks, kui see liigub nupu kohal:

Oleme pakkunud lihtsaima meetodi kursori kujutise muutmiseks hõljutamisel CSS-i abil.

Järeldus

CSS-is saate kursori muuta kursoril olevale pildile, kasutades nuppu ' kursor ” vara. See võimaldab muuta tavalise kursori pildiks, määrates ' url ” pildist kursori atribuudile. Saate rakendada mis tahes tüüpi kursorit, mida soovite kuvada, kui see hõljub elemendil. See artikkel demonstreeris meetodit kursori muutmiseks käekursoriks.