Hvad er markører i CSS?
Hver dag bruger vi allerede tilpassede markører. Denne interaktion er muliggjort ved at bruge modificerede markører, såsom når du svæver over knapper, forvandles markørmarkøren til en hånd, eller når du svæver over teksten, og markøren forvandles til en tekstmarkør.
Markører kan dog også bruges til at give vores brugere forskellige ekstra kreative muligheder.
Vi skal være opmærksomme på, at CSS allerede har standardmarkører til forskellige ofte udførte handlinger, før vi begynder at udvikle vores brugerdefinerede markører.
Disse markører giver muligheder for handling på det præcise sted, du svæver over. Eksempler omfatter markører, der angiver, at du skal klikke på links, trække og slippe elementer, zoome ind og ud af objekter og mere.
Brug egenskaben CSS-markør til at beskrive den type markør, du ønsker.
CSS-markøregenskab
Vi kan angive den type markør, der skal vises til brugeren ved hjælp af CSS-markøregenskaben.
Brug af billeder som indsend-knapper på formularer er en nyttig anvendelse af denne funktion. Som standard vises en hånd i stedet for en markør, når en markør er over et link. En formulars indsend-knap får den dog ikke til at ændre form. Dette fungerer som et visuelt tegn på, at billedet kan klikkes, når nogen svæver over et billede, der er en indsend-knap.
Denne egenskab er angivet med nul eller flere værdier adskilt af kommaer, efterfulgt af én nøgleordsværdi efter behov, og hver vil referere til billedfilen.
Syntaks
cursor: value;
Ejendomsværdier
| Auto: | Standardindstillingen for denne attribut er at placere markøren.
| Alias: | Denne attribut bruges til at vise markørens oprettelsesrelaterede indikator.
| All-scroll: | Markøren i denne attribut angiver rulning.
| Celle: | Markøren i denne egenskab angiver, at en celle eller gruppe af celler i øjeblikket er valgt.
| Kontekstmenu: | Markøren i denne attribut viser tilstedeværelsen af en kontekstmenu.
| Col-tilpasning: | Når markøren er over en kolonne i denne egenskab, kan størrelsen ændres vandret.
| Kopi: | Markøren i denne egenskab angiver, at noget skal kopieres.
| Hårkors: | Markøren vises som et trådkors i denne attribut.
| Standard: | Standardmarkøren.
| Ændre størrelse: | Markøren i denne attribut angiver, at en bokss højre kant skal flyttes.
| Tilpas størrelsen: | Markøren i denne attribut repræsenterer en tovejsændringsmarkør.
| Hjælp: | I denne egenskab viser markøren, at assistance er tilgængelig.
| Bevæge sig: | Markøren i denne egenskab betyder, at noget skal flyttes
| . n-ændre størrelse: | Når du bruger egenskaben n-resize, viser markøren, at en kasses øvre grænse skal flyttes.
| Hvad-tilpasning: | Med denne egenskab viser markøren, at en bokss kant skal flyttes til højre og op.
| Ny størrelse: | Markøren til tovejsændring af størrelse er angivet med denne attribut.
| Ns-tilpasning: | En tovejs resize-markør er angivet med attributten ns-resize.
| Nw-ændre størrelse: | Markøren i denne attribut viser, at en bokss øvre og nedre kanter skal flyttes op og til venstre.
| Ændre størrelse på næse: | Markøren til tovejsændring af størrelse er angivet med denne attribut.
| No-drop: | Markøren i denne attribut angiver, at det udtrukne objekt ikke kan dumpes på denne placering.
| Ingen: | Der vises ikke en markør for elementet ifølge denne attribut.
| Ikke tilladt: | Markøren i denne egenskab angiver, at den anmodede handling ikke vil blive udført.
| Pointer: | Markøren i denne egenskab fungerer som en pegepind og viser linkfremskridt.
| Fremskridt: | Markøren i denne attribut viser, at programmet er aktivt.
| Ændr rækkestørrelse: | Markøren viser, at denne funktion giver mulighed for at ændre størrelsen på lodrette rækker.
| S-størrelse: | Når du bruger denne egenskab, viser markøren, at en kasses bundgrænse skal sænkes.
| Tilpas størrelse: | Markøren i denne attribut angiver, at en bokss kant skal flyttes til højre og ned.
| Sw-tilpas størrelse: | Markøren i denne attribut angiver, at en bokss venstre og nederste kanter skal flyttes.
| Tekst: | Markøren i denne attribut angiver tekst, der kan vælges.
| URL: | Denne egenskab indeholder en liste over brugerdefinerede markør-URL'er adskilt af kommaer og en generisk markør i slutningen af listen.
| Lodret tekst: | Markøren i denne attribut viser mulige lodrette tekstvalg.
| W-tilpasning: | Når du bruger denne egenskab, viser markøren, at en bokss venstre kant skal flyttes.
Eksempel
Dette eksempel viser, hvordan man bruger markøregenskaben. Programmet er optaget, da cursoregenskabens værdi er indstillet til at vente.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Produktion
Vi kan angive, hvilken type markør, der skal vises til brugeren ved hjælp af egenskaben CSS-markør. Brug af billeder som indsend-knapper på formularer er en nyttig anvendelse af denne funktion. Som standard vises en hånd i stedet for en markør, når en markør er over et link.
