I CSS brukes forskjellige typer markører for forskjellige HTML -elementer, og for å endre typen markør, "markør”Eiendom brukes. Det tillater deg å endre markørtypen og angi verdien på markøren du vil vise på skjermen. Som en tilleggsfunksjon lar den deg også angi ditt eget markørbilde.

I denne guiden lærer du:

• Hva er markør CSS -eiendom
• Hvordan du kan endre markør til bilde på svevet ved hjelp av CSS

Så la oss starte!

Hva er "markør" CSS -eiendom?

For å kontrollere musens utseende over et HTML -element, “markør”Eiendom til CSS kan brukes. Det gjør det mulig å endre den vanlige markøren til forskjellige typer som kopiering, håndpeker, ta tak og mange flere. Du kan også angi din egen tilpassede markør ved å stille URL -en til bildet i markøregenskapen.

Syntaks

Syntaksen til markøregenskapen er gitt som:

Markør: URL ();

I den ovennevnte syntaks, tilordne banen til bildet i “URL ()”Som du vil vise på skjermen.

Vi vil nå flytte til eksemplet for å endre den vanlige markøren til et bilde på svevet.

Hvordan du kan endre markør til bilde på svevet ved hjelp av CSS?

For å endre markøren til et bilde på Hover, først, legg til et element i HTML.

Eksempel 1: Endre markør til et bilde på Hover ved hjelp av markøregenskaper

Vi vil lage en overskrift

og knappeklassenavn "btn”.

Html

Endre markør til bilde på svevet

Klikk på meg

For øyeblikket vil det å sveve på knappen vise standardmarkøren:

Gå nå til CSS og bytt markøren til bildet.

Sett deretter banen til bildet i "URL ()”. For eksempel har vi spesifisert “ilure.svg”Som vårt valgte bilde. Sett deretter verdien av markøregenskapen som "bil”.

CSS

.btn
Markør: URL (ikon.svg), auto;
polstring: 10px;

Lagre koden ovenfor og utfør HTML -filen for å se følgende utfall:

Den gitte utgangen indikerer at markøren blir vellykket endret til et bilde på svevet.

Merk: “bil”Brukes som et alternativ i markøregenskapen; Når bildet ikke lastes inn, eller selve filstien eller filen mangler, vises standardikonet på skjermen på grunn av bilverdien.

Eksempel 2: Angi standardmarkør på svevet

For eksempel vil vi gi nettadressen til bildet og bare sette verdien av markøregenskapen som "bil”:

Markør: URL (), Auto;

Som et resultat vil ikke markøren endres når den sveves over knappen:

Eksempel 3: Angi bildealternativ på svevet

I stedet for bil, kan du angi forskjellige verdier av markøren du vil vise som et alternativ til bildet. For eksempel vil vi endre verdien av markøregenskapen fra “bil" til "peker”:

Markør: URL (), peker;

Som du kan se i utdataene nedenfor, blir markøren endret til en håndpeker når den henger over knappen:

Vi har gitt den enkleste metoden for å endre markørbildet på Huve ved hjelp av CSS.

Konklusjon

I CSS kan du endre markøren til bildet når du svever ved å bruke "markør”Eiendom. Det tillater å endre en vanlig markør til et bilde ved å tilordne “URL”Av bildet til markøregenskapen. Du kan bruke hvilken som helst type markør du vil vise når den har svevet på et element. Denne artikkelen demonstrerte metoden for å endre markøren til en håndpeker.