Vad är Cursors i CSS?
Varje dag använder vi redan anpassade markörer. Denna interaktion möjliggörs genom att använda modifierade markörer, till exempel när du håller muspekaren över knappar, förvandlas pekaren till en hand, eller när du håller muspekaren över texten och markören förvandlas till en textmarkör.
Markörer kan dock också användas för att ge våra användare olika ytterligare kreativa möjligheter.
Vi bör vara medvetna om att CSS redan har standardmarkörer för olika ofta utförda åtgärder innan vi börjar utveckla våra anpassade markörer.
Dessa markörer ger alternativ för åtgärder på den exakta plats du svävar över. Exempel inkluderar markörer som indikerar att du ska klicka på länkar, dra och släppa element, zooma in och ut på objekt och mer.
Använd egenskapen CSS-markör för att beskriva vilken typ av markör du vill ha.
CSS-marköregenskap
Vi kan ange vilken typ av markör som ska visas för användaren med CSS-marköregenskapen.
Att använda bilder som inlämningsknappar på formulär är en användbar tillämpning av denna funktion. Som standard visas en hand istället för en pekare när en markör är ovanför en länk. Ett formulärs skicka-knapp gör dock inte att det ändrar form. Detta fungerar som en visuell signal om att bilden är klickbar när någon svävar över en bild som är en skicka-knapp.
Den här egenskapen specificeras av noll eller fler värden separerade med kommatecken, följt av ett nyckelordsvärde efter behov, och varje kommer att referera till bildfilen.
Syntax
cursor: value;
Fastighetsvärden
| Bil: | Standardinställningen för detta attribut är att placera markören.
| Alias: | Det här attributet används för att visa markörens skapelserelaterade indikator.
| All-scroll: | Markören i detta attribut anger rullning.
| Cell: | Markören i den här egenskapen indikerar att en cell eller grupp av celler för närvarande är vald.
| Innehållsmeny: | Markören i detta attribut visar närvaron av en snabbmeny.
| Ändra färgstorlek: | När markören är ovanför en kolumn i den här egenskapen kan storleken ändras horisontellt.
| Kopiera: | Markören i den här egenskapen indikerar att något måste kopieras.
| Hårkors: | Markören visas som ett hårkors i detta attribut.
| Standard: | Standardmarkören.
| E-ändra storlek: | Markören i detta attribut indikerar att rutans högra kant ska flyttas.
| Ändra storlek: | Markören i detta attribut representerar en dubbelriktad markör för storleksändring.
| Hjälp: | I den här egenskapen visar markören att assistans är tillgänglig.
| Flytta: | Pekaren i den här egenskapen antyder att något måste flyttas
| . n-ändra storlek: | När du använder egenskapen n-resize visar pekaren att en boxs övre gräns ska flyttas.
| Vilken storleksändring: | Med den här egenskapen visar markören att en boxs kant ska flyttas åt höger och uppåt.
| Ny storleksändring: | Den dubbelriktade storleksändringsmarkören indikeras av detta attribut.
| Ändra storlek på Ns: | En dubbelriktad resize-markör indikeras av attributet ns-resize.
| Nw-ändra storlek: | Markören i detta attribut visar att en rutas övre och nedre kanter ska flyttas uppåt och vänster.
| Ändra storlek på näsan: | Den dubbelriktade storleksändringsmarkören indikeras av detta attribut.
| No-dropp: | Markören i detta attribut indikerar att det utdragna objektet inte kan dumpas på den här platsen.
| Ingen: | En markör visas inte för elementet enligt detta attribut.
| Inte tillåtet: | Markören i den här egenskapen indikerar att den begärda åtgärden inte kommer att utföras.
| Pekare: | Markören i den här egenskapen fungerar som en pekare och visar länkförloppet.
| Framsteg: | Markören i detta attribut visar att programmet är aktivt.
| Ändra storlek på rad: | Markören visar att den här funktionen gör det möjligt att ändra storlek på vertikala rader.
| S-ändra storlek: | När du använder den här egenskapen visar pekaren att en boxs bottengräns ska sänkas.
| Se-ändra storlek: | Markören i det här attributet indikerar att en boxs kant ska flyttas åt höger och nedåt.
| Sw-ändra storlek: | Markören i detta attribut indikerar att en rutas vänstra och nedre kanter ska flyttas.
| Text: | Markören i detta attribut anger text som kan väljas.
| URL: | Den här egenskapen innehåller en lista med anpassade marköradresser separerade med kommatecken och en generisk markör i slutet av listan.
| Vertikal-text: | Markören i detta attribut visar möjliga vertikala textval.
| W-ändra storlek: | När du använder den här egenskapen visar pekaren att en boxs vänstra kant ska flyttas.
Exempel
Det här exemplet visar hur man använder marköregenskapen. Programmet är upptaget eftersom marköregenskapens värde är inställt på att vänta.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Produktion
Vi kan ange vilken typ av markör som ska visas för användaren med CSS-marköregenskapen. Att använda bilder som inlämningsknappar på formulär är en användbar tillämpning av denna funktion. Som standard visas en hand istället för en pekare när en markör är ovanför en länk.
