Cursor - CSS-trucs | CSS Almanac 2025

De cursoreigenschap in CSS bepaalt hoe de muiscursor eruitziet wanneer deze zich boven het element bevindt waarin deze eigenschap is ingesteld. Het is duidelijk alleen relevant in browsers / besturingssystemen waarin een muis en cursor aanwezig zijn. Ze worden voornamelijk gebruikt voor UX om het idee van bepaalde functionaliteit over te brengen. Dus probeer die premie niet te breken.

Er zijn er een aantal:

.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; )

De cursor kan ook een afbeelding zijn:

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

Sommige WebKit-cursors:

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

Meer informatie

CSS Basic User Interface Module Level 3
Mozilla Docs

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome	Firefox	D.W.Z	Rand	Safari
5	4	9	14	5

Mobiel / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	Nee	81	Nee

En voor nieuwere waarden, zoals zoom-inen zoom-out:

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.