I CSS brukes forskjellige typer markører for forskjellige HTML-elementer, og for å endre markørtypen, ' markøren ” eiendom brukes. Den lar deg endre markørtype og angi verdien til markøren du vil vise på skjermen. Som en tilleggsfunksjon lar den deg også angi ditt eget markørbilde.

I denne veiledningen lærer du:

• Hva er markør CSS-egenskap
• Hvordan endre markør til bilde på Hover ved hjelp av CSS

Så la oss begynne!

Hva er 'markør' CSS-egenskap?

For å kontrollere utseendet til musen over et HTML-element, ' markøren ” egenskapen til CSS kan brukes. Det gjør det mulig å endre den vanlige markøren til forskjellige typer som kopimarkør, håndpeker, grip og mange flere. Du kan også angi din egen tilpassede markør ved å angi url til bildet i markøregenskapen.

Syntaks

Syntaksen til markøregenskapen er gitt som:

I den ovenfor angitte syntaksen tilordner du banen til bildet i ' url() ' som du vil vise på skjermen.

Vi vil nå gå til eksemplet for å endre den vanlige markøren til et bilde ved pekeren.

Hvordan endre markør til bilde ved hover ved hjelp av CSS?

For å endre markøren til et bilde når du peker, legg først til et element i HTML.

Eksempel 1: Endre markør til et bilde ved peker ved hjelp av markøregenskap

Vi vil lage en overskrift

og knappen klassenavn ' btn '.

HTML

< kropp >
< h1 > Endre markør til bilde ved peker h1 >
< knapp klasse = 'btn' > Klikk på meg knapp >
kropp >

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

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

Sett deretter banen til bildet i ' url() '. For eksempel har vi spesifisert 'i with.svg ” som vårt valgte bilde. Sett deretter verdien til markøregenskapen som ' auto '.

CSS

.btn {
markør: url ( icon.svg ) , auto;
polstring: 10px;
}

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

Den gitte utdata indikerer at markøren er vellykket endret til et bilde ved sveving.

Merk: ' auto ” brukes som et alternativt alternativ i markøregenskapen; når bildet ikke lastes inn, eller selve filbanen eller filen mangler, vises standardikonet på skjermen på grunn av autoverdien.

Eksempel 2: Angi standardmarkør ved peker

For eksempel vil vi gi url-en til bildet og bare sette verdien til markøregenskapen som ' auto ':

markør: url ( ) , auto;

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

Eksempel 3: Stille inn bildealternativ på hover

I stedet for auto kan du angi forskjellige verdier for markøren du vil vise som et alternativ til bildet. For eksempel vil vi endre verdien av markøregenskapen fra ' auto ' til ' pekeren ':

markør: url ( ) , peker;

Som du kan se i utgangen nedenfor, endres markøren til en håndpeker når den svever over knappen:

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

Konklusjon

I CSS kan du endre markøren til bildet når du holder musepekeren ved å bruke ' markøren ” eiendom. Det lar deg 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.