Hoppa till innehållet
Gratis verktyg

CSS-cursorvisare: testa alla cursortyper direkt

CSS Cursor Viewer visar alla 36 värden för CSS-egenskapen cursor, sorterade efter användning och med ditt systems riktiga muspekare: För musen över till exempel not-allowed, se den överstrukna cirkeln och kopiera cursor: not-allowed; med ett klick. Gratis, utan registrering – allt sker i webbläsaren.

Byggd av Justin Schuessler

Koden klar? Publicera din webbplats med snabbt och pålitligt webbhotell.

Publicera din webbplats

Alla cursor-värden efter användningsområde

Användningsområde

36 av 36 värden

Förhandsvisningen visar pekaren så som ditt operativsystem och din webbläsare ritar den. Därför ser många pekare olika ut i macOS, Windows och Linux.

Allmänt3

  • auto

    Webbläsaren väljer själv, t.ex. textmarkör över text och pil bredvid. Det här är standardvärdet.

    För muspekaren hit
  • default

    Den vanliga pilen, även över text. För ytor som inte går att klicka på.

    För muspekaren hit
  • none

    Döljer muspekaren, t.ex. vid helskärmsvideor, spel eller en anpassad pekare.

    För muspekaren hit

Länkar och status5

  • pointer

    Handen med pekfinger för länkar, knappar och annat som går att klicka på.

    För muspekaren hit
  • help

    Frågetecken vid pilen när hjälp finns, t.ex. för en infoikon med verktygstips.

    För muspekaren hit
  • context-menu

    Visar att en snabbmeny finns, t.ex. för element med en egen högerklicksmeny.

    För muspekaren hit
  • progress

    Pil med laddningssymbol: Något laddas i bakgrunden, men sidan går fortfarande att använda.

    För muspekaren hit
  • wait

    Laddningssymbol utan pil: Gränssnittet är blockerat tills åtgärden är klar.

    För muspekaren hit

Val4

  • text

    Textmarkören (I-formad) för inmatningsfält och text som kan markeras.

    För muspekaren hit
  • vertical-text

    Liggande textmarkör för lodrät text, t.ex. med writing-mode: vertical-rl.

    För muspekaren hit
  • cell

    Ett tjockt plustecken för markerbara tabellceller, som i ett kalkylblad.

    För muspekaren hit
  • crosshair

    Hårkors för precisionsarbete, t.ex. ritytor, färgpipetter eller bildutsnitt.

    För muspekaren hit

Dra och släpp7

  • grab

    Öppen hand för element som kan dras, t.ex. kartor, listposter eller skjutreglage.

    För muspekaren hit
  • grabbing

    Sluten hand medan ett element dras.

    För muspekaren hit
  • move

    Pilkors för element som kan flyttas fritt, t.ex. fönster eller widgetar.

    För muspekaren hit
  • copy

    Pil med plus: En kopia skapas när du släpper, t.ex. när du drar filer.

    För muspekaren hit
  • alias

    Pil med länksymbol: En länk eller genväg skapas när du släpper.

    För muspekaren hit
  • no-drop

    Det dragna elementet kan inte släppas här, t.ex. utanför en släppzon.

    För muspekaren hit
  • not-allowed

    Överstruken cirkel för inaktiverade knappar och åtgärder som inte är tillåtna just nu.

    För muspekaren hit

Ändra storlek14

  • col-resize

    Ändra kolumnbredden, t.ex. vid avdelare mellan tabellkolumner eller delade vyer.

    För muspekaren hit
  • row-resize

    Ändra radhöjden, t.ex. vid vågräta avdelare mellan två områden.

    För muspekaren hit
  • n-resize

    Dra i överkanten för att förstora ett element uppåt.

    För muspekaren hit
  • e-resize

    Dra i högerkanten för att förstora ett element åt höger.

    För muspekaren hit
  • s-resize

    Dra i nederkanten för att förstora ett element nedåt.

    För muspekaren hit
  • w-resize

    Dra i vänsterkanten för att förstora ett element åt vänster.

    För muspekaren hit
  • ne-resize

    Dra i övre högra hörnet för att ändra bredd och höjd.

    För muspekaren hit
  • nw-resize

    Dra i övre vänstra hörnet för att ändra bredd och höjd.

    För muspekaren hit
  • se-resize

    Dra i nedre högra hörnet för att ändra bredd och höjd.

    För muspekaren hit
  • sw-resize

    Dra i nedre vänstra hörnet för att ändra bredd och höjd.

    För muspekaren hit
  • ew-resize

    Ändra bredden i båda riktningarna, t.ex. vid ett vågrätt skjutreglage eller en avdelare.

    För muspekaren hit
  • ns-resize

    Ändra höjden i båda riktningarna, t.ex. vid en lodrät avdelare.

    För muspekaren hit
  • nesw-resize

    Dra diagonalt från övre högra hörnet till nedre vänstra, t.ex. i hörnet på en panel.

    För muspekaren hit
  • nwse-resize

    Dra diagonalt från övre vänstra hörnet till nedre högra, t.ex. i handtaget längst ned till höger på en panel.

    För muspekaren hit

Rulla och zooma3

  • all-scroll

    Pilar åt alla håll: Innehållet kan rullas i alla riktningar, t.ex. en karta.

    För muspekaren hit
  • zoom-in

    Förstoringsglas med plus för bilder eller kartor som kan förstoras med ett klick.

    För muspekaren hit
  • zoom-out

    Förstoringsglas med minus när en förstorad bild kan förminskas med ett klick.

    För muspekaren hit

Testyta: pekare i användning

För muspekaren över exemplen, dra i kortet, avdelaren och panelhörnet och klicka på bilden.

  • Knapp

    pointer

  • Inaktiverad knapp

    not-allowed

  • Textlänk

    Du kan läsa mer i Dokumentation.

    pointer

  • Inmatningsfält

    text

  • Flyttbart kort

    Kort

    Dra för att flytta

    grab
    grabbing

  • Ändra kolumnbredd

    Kolumn A · 50 %
    Kolumn B · 50 %
    col-resize

  • Dra i panelhörnet

    Panel

    160 × 80 px

    nwse-resize

  • Laddningstillstånd

    Laddar i bakgrunden

    Du kan fortsätta arbeta.

    Vänta

    Området är blockerat.

    progress
    wait

  • Zoomningsbar bild

    zoom-in
    zoom-out

Översikt

Vad är CSS-egenskapen cursor?

CSS-egenskapen cursor anger vilken muspekare som visas när musen är över ett element. Den visar vad som går att göra där: handen vid pointer betyder klickbar, textmarkören betyder markerbar och den överstrukna cirkeln vid not-allowed betyder spärrad. Om inget anges gäller auto och webbläsaren bestämmer själv.

Syntax

Ett nyckelord per regel räcker. Tillstånd som :disabled eller :active får en egen muspekare:

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

.card[draggable="true"] {
  cursor: grab;
}

.card[draggable="true"]:active {
  cursor: grabbing;
}

Utility-klasser som cursor-pointer i Tailwind CSS sätter samma deklaration cursor: pointer;. Verktyget kopierar ren CSS, inte klasser.

36 standardvärden

CSS-specifikationen innehåller 36 nyckelord, från auto och pointer till de 14 muspekarna för storleksändring. Det här verktyget visar alla, sorterade efter användningsområde.

Ärvs

cursor gäller för elementet och alla dess underelement tills ett underelement anger ett eget värde. cursor: pointer på en container gäller alltså även texten i den.

Systemet ritar

CSS anger bara vilken muspekare som visas. Hur den ser ut bestäms av operativsystemet och webbläsaren. Därför ser den olika ut på macOS, Windows och Linux.

Ingen :hover behövs

Markören visas ändå bara när musen är över elementet. Sätt därför cursor direkt på elementet – du behöver ingen separat :hover-regel.

Markörtyper

Översikt över alla 36 CSS-markörtyper

Verktyget sorterar värdena för CSS-egenskapen cursor efter användning i sex grupper. Med filtret Användning visar du bara en grupp.

Allmänt3

Standardvärdet auto, den vanliga pilen default och none, som döljer muspekaren.

autodefaultnone

Länkar och status5

Handen för klickbara objekt, hjälp, snabbmeny och de två laddningstillstånden progress och wait.

pointerhelpcontext-menuprogresswait

Val4

Textmarkör för vågrät och lodrät text, plusmarkör för tabellceller och hårkors för precisionsarbete.

textvertical-textcellcrosshair

Dra och släpp7

Öppen och sluten hand, flyttmarkör och återkoppling vid släpp: kopia, länk, kan inte släppas, inte tillåtet.

grabgrabbingmovecopyaliasno-dropnot-allowed

Ändra storlek14

14 storleksändringsmarkörer för kanter, hörn, kolumner och rader, från n-resize till nwse-resize.

col-resizerow-resizen-resizee-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resize

Rulla och zooma3

Rullning i alla riktningar och förstoringsglas med plus eller minus för bilder och kartor.

all-scrollzoom-inzoom-out

Bästa praxis

Vilken CSS-cursor passar när?

Muspekaren ger användaren en förväntan. De här reglerna hjälper dig att uppfylla den.

pointer bara för klickbara element

Handen signalerar att något händer när man klickar. Använd den för länkar, knappar och klickbara kort, men inte för text eller ytor utan funktion.

not-allowed för inaktiverade tillstånd

En inaktiverad knapp får cursor: not-allowed. Tänk på att med pointer-events: none visas ingen muspekare för elementet, eftersom det inte registrerar musen.

grab och grabbing för att dra

Element som går att dra visas med grab. Under dragningen ändras det till grabbing, till exempel via :active eller en klass som ditt skript sätter.

text för text och inmatningsfält

Inmatningsfält har redan en textmarkör. Ange text själv bara där innehållet faktiskt kan markeras eller redigeras.

progress i stället för wait

Om något laddas i bakgrunden och sidan fortfarande kan användas passar progress. Använd wait bara när gränssnittet verkligen är blockerat.

none bara med ersättare

En osynlig muspekare är förvirrande. cursor: none passar för spel, helskärmsvideor eller en egen muspekare som ersätter systemets.

Så fungerar det

Så hittar du rätt CSS-cursor

Tre steg, utan registrering eller installation.

Steg 1

Hitta rätt cursor

Sök efter ett värde, ett användningsområde som resize eller drag eller ett tillstånd som disabled, eller filtrera efter grupp.

Steg 2

Testa cursorer

Håll musen över förhandsvisningen på en ruta eller använd exemplen i testytan för att se din dators faktiska cursor.

Steg 3

Kopiera deklaration

Ett klick på Kopiera lägger exakt deklarationen i urklipp, till exempel cursor: not-allowed;. Klistra in den i din CSS-regel.

Egna muspekare

Ange en egen muspekare med url()

I stället för ett nyckelord kan du ange en egen bild som muspekare. Efter bildadressen kan du ange hotspotens koordinater, alltså punkten som klickar. Sist anges alltid ett nyckelord som reserv om bilden inte laddas.

.canvas {
  cursor:
    url("/cursors/pencil.svg") 2 30,
    crosshair;
}

PNG och SVG passar bra. Webbläsare visar egna muspekare bara upp till 128 × 128 pixlar; 32 × 32 är vanligt. Det ska vara tydligt var klickpunkten finns i bilden.

Upptäck mer

Fler verktyg

HTML- och CSS-formaterare online (snygga till koden)

Formatera, gör indrag och snygga till HTML och CSS online – med automatisk språkidentifiering. Körs helt i webbläsaren, utan uppladdning.

Byggd av Luca Stanek

Konvertera SVG till PNG (SVG to PNG)

Ny

Konvertera SVG till PNG: spara skarpa vektorbilder i valfri storlek som PNG, JPG eller WebP, med transparent bakgrund och mallar för favicon, Discord-emoji och Minecraft-serverikon. Fungerar helt i webbläsaren.

Byggd av Luca Stanek

Färgväljare

Konvertera färger direkt mellan HEX, RGB, HSL, HSV och CMYK, hitta närmaste namngivna CSS-färg och kontrollera WCAG-kontrasten mot svart och vitt – helt i webbläsaren.

Byggd av Justin Schuessler

Kontrastkontroll

Beräkna kontrastförhållandet mellan två färger enligt WCAG i realtid och kontrollera mot AA/AAA och UI-komponenter – direkt i webbläsaren.

Byggd av Justin Schuessler

Generator för färgscheman

Skapa komplementära, analoga, triadiska och andra färgscheman direkt utifrån en basfärg – ingenting sparas eller överförs.

Byggd av Justin Schuessler

Favicon-generator

Skapa en komplett uppsättning favikoner från valfri bild – favicon.ico, Apple Touch-ikon, Android Chrome-ikoner, site.webmanifest och ett färdigt HTML-kodavsnitt att kopiera, helt i webbläsaren.

Byggd av Jakub Martyniak

FAQ

Vanliga frågor

Korta svar om CSS-egenskapen cursor och det här verktyget.

36 nyckelord i sex grupper: Allmänt (auto, default, none), Länkar och status (pointer, help, context-menu, progress, wait), Markering (text, vertical-text, cell, crosshair), Dra och släpp (grab, grabbing, move, copy, alias, no-drop, not-allowed), 14 cursorer för storleksändring samt Rullning och zoom (all-scroll, zoom-in, zoom-out). Du kan också använda egna bilder via url().

pointer passar för allt som utlöser något vid klick: länkar, knappar, klickbara kort och ikoner. Länkar får handmarkören automatiskt, men knappar får den inte i många webbläsare. Använd inte pointer på text eller ytor utan funktion. cursor: hand är ett gammalt, icke-standardiserat värde från tidiga versioner av Internet Explorer och ingår därför inte bland verktygets 36 värden. Du får handmarkören med cursor: pointer;.

Sätt cursor: auto på elementet så bestämmer webbläsaren själv, eller cursor: default för den vanliga pilen. Eftersom cursor ärvs kan du åsidosätta ett pointer-värde från det överordnade elementet direkt på det underordnade. Båda värdena finns i gruppen Allmänt i verktyget.

cursor: not-allowed, alltså den överstrukna cirkeln. Om du även sätter pointer-events: none på den inaktiverade knappen visas inte cursorn, eftersom elementet då ignorerar musen. I testytan ser du knappen med not-allowed.

grab är den öppna handen över ett element som går att dra, grabbing den knutna handen medan du drar. move visar ett pilkors och passar för element som kan flyttas fritt, till exempel fönster eller widgetar.

progress visar en pil med laddningssymbol: något laddas i bakgrunden, men sidan går fortfarande att använda. wait visar bara laddningssymbolen och betyder att gränssnittet är blockerat. För de flesta laddningar på webben passar progress.

Med cursor: url(cursor.svg) 2 30, crosshair; anger du en bild och eventuellt en hotspot, följt av ett nyckelord som reserv. Webbläsare visar bara egna cursorer upp till 128 × 128 pixlar. Verktyget visar de 36 standardvärdena; här kan du inte ladda upp egna bilder.

CSS anger bara vilken cursor som ska visas. Den ritas av operativsystemet och webbläsaren och ser därför olika ut i macOS, Windows och Linux. Pekskärmar har ingen muspekare: där visar verktyget en lista med beskrivningar och kopieringsknappar. Allt körs i webbläsaren, utan uppladdning.

Fler frågor?

Kontakta supporten
Bygger du en webbplats just nu?

Din webbplats behöver tillförlitlig hosting

En VPS från ZAP-Hosting gör din webbplats tillgänglig online på ett tillförlitligt sätt.

4,4/5 Trustpilot32.000+ Aktiva servrarSedan 2010
Visa hosting

Ingen konfigurering. Ingen risk. Online på några sekunder.

Flexibel avtalstidAvsluta när som helstOnline på 60 sekunder

Letar du efter fler verktyg? Visa alla utvecklarverktyg