I CSS bruges forskellige typer markører til forskellige HTML-elementer, og for at ændre markørens type, ' cursoren ” ejendom anvendes. Det giver dig mulighed for at ændre markørtypen og indstille værdien af ​​den markør, du ønsker at vise på skærmen. Som en ekstra funktion lader den dig også indstille dit eget markørbillede.

I denne guide lærer du:

• Hvad er cursor CSS-egenskab
• Sådan ændres markør til billede på Hover ved hjælp af CSS

Så lad os starte!

Hvad er 'cursor' CSS-egenskab?

For at kontrollere udseendet af musen over et HTML-element skal ' cursoren ” egenskab af CSS kan bruges. Det gør det muligt at ændre den almindelige markør til forskellige typer såsom kopimarkør, håndmarkør, grab og mange flere. Du kan også indstille din egen brugerdefinerede markør ved at indstille url'en til billedet i markøregenskaben.

Syntaks

Syntaksen for markøregenskaben er givet som:

I den ovenfor givne syntaks skal du tildele stien til billedet i ' url() ”, som du vil have vist på skærmen.

Vi vil nu gå til eksemplet for at ændre den almindelige markør til et billede, når du svæver.

Hvordan ændres markør til billede ved svæv ved hjælp af CSS?

For at ændre markøren til et billede, når du svæver, skal du først tilføje et element i HTML.

Eksempel 1: Ændring af markør til et billede ved svæv ved hjælp af markøregenskab

Vi vil oprette en overskrift

og knap klassenavn ' btn ”.

HTML

< legeme >
< h1 > Skift markør til billede ved svæv h1 >
< knap klasse = 'btn' > Klik på Mig knap >
legeme >

I øjeblikket vises standardmarkøren ved at svæve på knappen:

Flyt nu til CSS og skift markøren til billedet.

Indstil derefter stien til billedet i ' url() ”. For eksempel har vi specificeret 'i med.svg ” som vores udvalgte billede. Indstil derefter værdien af ​​markøregenskaben som ' auto ”.

CSS

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

Gem ovenstående kode og kør HTML-filen for at se følgende resultat:

Det givne output indikerer, at markøren er blevet ændret til et billede, når du svæver.

Bemærk: “ auto ” bruges som en alternativ mulighed i markøregenskaben; når billedet ikke indlæses, eller selve filstien eller filen mangler, vises standardikonet på skærmen på grund af den automatiske værdi.

Eksempel 2: Indstilling af standardmarkør ved hover

For eksempel vil vi give url'en til billedet og kun indstille værdien af ​​cursor-egenskaben som ' auto ”:

markør: url ( ) , auto;

Som et resultat vil markøren ikke ændre sig, når den holdes over knappen:

Eksempel 3: Indstilling af billedalternativ ved hover

I stedet for auto kan du indstille forskellige værdier for den markør, du ønsker at vise som et alternativ til billedet. For eksempel vil vi ændre værdien af ​​markøregenskaben fra ' auto ' til ' pointer ”:

markør: url ( ) , pointer;

Som du kan se i nedenstående output, ændres markøren til en håndmarkør, når den svæver over knappen:

Vi har leveret den nemmeste metode til at ændre markørbilledet ved at svæve ved hjælp af CSS.

Konklusion

I CSS kan du ændre markøren til billedet, når du svæver ved at bruge ' cursoren ” ejendom. Det gør det muligt at ændre en almindelig markør til et billede ved at tildele ' url ” af billedet til markøregenskaben. Du kan anvende enhver type markør, du vil have vist, når den har svævet på et element. Denne artikel demonstrerede metoden til at ændre markøren til en håndmarkør.