Markör - CSS-tricks | CSS Almanack 2025

Den cursoregendom i CSS styr vad muspekaren kommer att se ut när den är placerad över elementet där den här egenskapen är inställd. Uppenbarligen är det bara relevant i webbläsare / operativsystem där det finns en mus och markör. De används huvudsakligen för UX för att förmedla idén om viss funktionalitet. Så försök att inte bryta det priset.

Det finns en massa av dem:

.auto ( cursor: auto; ) .default ( cursor: default; ) .none ( cursor: none; ) .context-menu ( cursor: context-menu; ) .help ( cursor: help; ) .pointer ( cursor: pointer; ) .progress ( cursor: progress; ) .wait ( cursor: wait; ) .cell ( cursor: cell; ) .crosshair ( cursor: crosshair; ) .text ( cursor: text; ) .vertical-text ( cursor: vertical-text; ) .alias ( cursor: alias; ) .copy ( cursor: copy; ) .move ( cursor: move; ) .no-drop ( cursor: no-drop; ) .not-allowed ( cursor: not-allowed; ) .all-scroll ( cursor: all-scroll; ) .col-resize ( cursor: col-resize; ) .row-resize ( cursor: row-resize; ) .n-resize ( cursor: n-resize; ) .e-resize ( cursor: e-resize; ) .s-resize ( cursor: s-resize; ) .w-resize ( cursor: w-resize; ) .ns-resize ( cursor: ns-resize; ) .ew-resize ( cursor: ew-resize; ) .ne-resize ( cursor: ne-resize; ) .nw-resize ( cursor: nw-resize; ) .se-resize ( cursor: se-resize; ) .sw-resize ( cursor: sw-resize; ) .nesw-resize ( cursor: nesw-resize; ) .nwse-resize ( cursor: nwse-resize; )

Markören kan också vara en bild:

.custom ( cursor: url(images/my-cursor.png.webp), auto; )

Vissa WebKit-markörer bara:

-webkit-zoom-in -webkit-zoom-out -webkit-zoom-grab -webkit-zoom-grabbing

Mer information

CSS Basic User Interface Module Level 3
Mozilla Docs

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom	Firefox	IE	Kant	Safari
5	4	9	14	5

Mobil / surfplatta

Android Chrome	Android Firefox	Android	iOS Safari
88	Nej	81	Nej

Och för nyare värden, som zoom-inoch zoom-out:

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.