Hva er Cursors i CSS?

Hver dag bruker vi allerede tilpassede markører. Denne interaksjonen er muliggjort ved å bruke modifiserte markører, for eksempel når du holder musepekeren over knapper, forvandles pekermarkøren til en hånd, eller når du holder markøren over teksten og markøren forvandles til en tekstmarkør.

Markører kan imidlertid også brukes til å gi brukerne våre flere kreative muligheter.

Vi bør være klar over at CSS allerede har standardpekere for forskjellige ofte utførte handlinger før vi begynner å utvikle våre tilpassede pekere.

Disse markørene gir alternativer for handling på det nøyaktige stedet du svever over. Eksempler inkluderer markører som indikerer at du bør klikke på koblinger, dra og slippe elementer, zoome inn og ut av objekter og mer.

Bruk CSS-markøregenskapen for å beskrive hvilken type markør du ønsker.

CSS-markøregenskap

Vi kan spesifisere hvilken type markør som skal vises til brukeren ved å bruke CSS-markøregenskapen.

Å bruke bilder som innsendingsknapper på skjemaer er en nyttig anvendelse av denne muligheten. Som standard vises en hånd i stedet for en peker når en markør er over en lenke. Et skjemas send-knapp fører imidlertid ikke til at det endrer skjema. Dette fungerer som en visuell pekepinn på at bildet er klikkbart når noen svever over et bilde som er en send-knapp.

Denne egenskapen er spesifisert med null eller flere verdier atskilt med komma, etterfulgt av én nøkkelordverdi etter behov, og hver vil referere til bildefilen.

Syntaks

 cursor: value; 

Eiendomsverdier

Auto:Standardinnstillingen for dette attributtet er å plassere markøren.Alias:Dette attributtet brukes til å vise markørens opprettelsesrelaterte indikator.All-scroll:Markøren i dette attributtet angir rulling.Celle:Markøren i denne egenskapen indikerer at en celle eller gruppe med celler er valgt.Kontekstmenyen:Markøren i dette attributtet viser tilstedeværelsen av en kontekstmeny.Endre størrelse på farge:Når markøren er over en kolonne i denne egenskapen, kan størrelsen endres horisontalt.Kopiere:Markøren i denne egenskapen indikerer at noe må kopieres.Trådkors:Markøren vises som et trådkors i denne attributten.Misligholde:Standardmarkøren.E-endre størrelse:Markøren i dette attributtet indikerer at en bokss høyre kant skal flyttes.Endre størrelsen:Markøren i dette attributtet representerer en toveis endringsmarkør.Hjelp:I denne egenskapen viser markøren at assistanse er tilgjengelig.Bevege seg:Pekeren i denne egenskapen antyder at noe må flyttes. n-endre størrelse:Når du bruker egenskapen n-resize, viser pekeren at en boks øvre grense skal forskyves.Hva-endre størrelse:Med denne egenskapen viser markøren at kanten til en boks skal flyttes til høyre og opp.Ny størrelse:Markøren for toveis endring av størrelse indikeres av dette attributtet.Ns-endre størrelse:En toveis endre størrelsesmarkør er indikert med attributtet ns-resize.Nw-endre størrelse:Markøren i dette attributtet viser at boksens øvre og nedre kant skal flyttes opp og til venstre.Endre størrelse på nese:Markøren for toveis endring av størrelse indikeres av dette attributtet.No-drop:Markøren i dette attributtet indikerer at det hentede objektet ikke kan dumpes på dette stedet.Ingen:En markør vises ikke for elementet i henhold til dette attributtet.Ikke tillatt:Markøren i denne egenskapen indikerer at den forespurte handlingen ikke vil bli utført.Peker:Markøren i denne egenskapen fungerer som en peker og viser koblingsfremdrift.Framgang:Markøren i denne attributten viser at programmet er aktivt.Endre størrelse på rad:Markøren viser at denne funksjonen gjør det mulig å endre størrelse på loddrette rader.S-endre størrelse:Når du bruker denne egenskapen, viser pekeren at en boks nederste grense skal senkes.Endre størrelse:Markøren i dette attributtet indikerer at kanten til en boks skal flyttes til høyre og ned.Sw-endre størrelse:Markøren i dette attributtet indikerer at venstre og nedre kant av en boks skal flyttes.Tekst:Markøren i dette attributtet angir tekst som kan velges.URL:Denne egenskapen inneholder en liste over egendefinerte markør-URL-er atskilt med komma og en generisk markør på slutten av listen.Vertikal tekst:Markøren i dette attributtet viser mulige vertikale tekstvalg.W-endre størrelse:Når du bruker denne egenskapen, viser pekeren at en bokss venstre kant skal flyttes.

Eksempel

Dette eksemplet viser hvordan du bruker markøregenskapen. Programmet er opptatt siden markøregenskapens verdi er satt til å vente.

 CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> 

Produksjon

Vi kan spesifisere hvilken type markør som skal vises til brukeren ved å bruke CSS-markøregenskapen. Å bruke bilder som innsendingsknapper på skjemaer er en nyttig anvendelse av denne muligheten. Som standard vises en hånd i stedet for en peker når en markør er over en lenke.