CSS Cursor Viewer: test alle cursortypen live
De CSS Cursor Viewer toont alle 36 waarden van de CSS-eigenschap cursor, gegroepeerd op toepassing en met de echte muisaanwijzer van je systeem. Beweeg bijvoorbeeld over not-allowed, zie de doorgestreepte cirkel en kopieer cursor: not-allowed; met één klik. Gratis, zonder registratie; alles werkt in je browser.
Gebouwd door Justin Schuessler
Code klaar? Zet je site online met snelle, betrouwbare webhosting.
Alle cursor-waarden op gebruiksdoel
Gebruiksdoel
36 van 36 waarden
Het voorbeeld toont de cursor zoals je besturingssysteem en browser die weergeven. Daardoor zien veel cursors er op macOS, Windows en Linux anders uit.
Algemeen3
autoDe browser bepaalt zelf welke cursor wordt weergegeven, bijvoorbeeld een tekstcursor boven tekst en een pijl ernaast. Dit is de standaardwaarde.
Beweeg de muis hierheendefaultDe gewone pijl, ook boven tekst. Voor gebieden waarop je niet kunt klikken.
Beweeg de muis hierheennoneVerbergt de muisaanwijzer, bijvoorbeeld bij video's op volledig scherm, games of een eigen cursor.
Beweeg de muis hierheen
Links en status5
pointerHet handje met wijsvinger voor links, knoppen en alles waarop je kunt klikken.
Beweeg de muis hierheenhelpEen vraagteken bij de pijl als er hulp beschikbaar is, bijvoorbeeld bij een infopictogram met tooltip.
Beweeg de muis hierheencontext-menuGeeft aan dat er een contextmenu beschikbaar is, bijvoorbeeld voor elementen met een eigen rechtermuisknopmenu.
Beweeg de muis hierheenprogressPijl met laadpictogram: er wordt iets op de achtergrond geladen, maar je kunt de pagina blijven gebruiken.
Beweeg de muis hierheenwaitLaadpictogram zonder pijl: de interface is geblokkeerd totdat de bewerking is voltooid.
Beweeg de muis hierheen
Selectie4
textDe tekstcursor (I-vorm) voor invoervelden en tekst die je kunt selecteren.
Beweeg de muis hierheenvertical-textDe liggende tekstcursor voor verticale tekst, bijvoorbeeld bij writing-mode: vertical-rl.
Beweeg de muis hierheencellEen dik plusteken voor selecteerbare tabelcellen, zoals in een spreadsheet.
Beweeg de muis hierheencrosshairEen dradenkruis voor nauwkeurig werk, bijvoorbeeld op tekenvlakken, met kleurpipetten of bij het selecteren van beelduitsneden.
Beweeg de muis hierheen
Slepen en neerzetten7
grabEen open hand voor elementen die je kunt verslepen, bijvoorbeeld kaarten, lijstitems of schuifregelaars.
Beweeg de muis hierheengrabbingEen gesloten hand terwijl een element wordt versleept.
Beweeg de muis hierheenmovePijlenkruis voor elementen die je vrij kunt verplaatsen, bijvoorbeeld vensters of widgets.
Beweeg de muis hierheencopyPijl met plusteken: bij het neerzetten ontstaat een kopie, bijvoorbeeld bij het verslepen van bestanden.
Beweeg de muis hierheenaliasPijl met koppelingspictogram: bij het neerzetten ontstaat een link of snelkoppeling.
Beweeg de muis hierheenno-dropHet versleepte element kan hier niet worden neergezet, bijvoorbeeld buiten een neerzetgebied.
Beweeg de muis hierheennot-allowedEen doorgestreepte cirkel voor uitgeschakelde knoppen en acties die momenteel niet zijn toegestaan.
Beweeg de muis hierheen
Grootte wijzigen14
col-resizeKolombreedte wijzigen, bijvoorbeeld bij scheidingslijnen tussen tabelkolommen of gesplitste weergaven.
Beweeg de muis hierheenrow-resizeRijhoogte wijzigen, bijvoorbeeld bij horizontale scheidingslijnen tussen twee gebieden.
Beweeg de muis hierheenn-resizeDe bovenrand verslepen om een element naar boven te vergroten.
Beweeg de muis hierheene-resizeDe rechterrand verslepen om een element naar rechts te vergroten.
Beweeg de muis hierheens-resizeDe onderrand verslepen om een element naar beneden te vergroten.
Beweeg de muis hierheenw-resizeDe linkerrand verslepen om een element naar links te vergroten.
Beweeg de muis hierheenne-resizeDe rechterbovenhoek verslepen om de breedte en hoogte te wijzigen.
Beweeg de muis hierheennw-resizeDe linkerbovenhoek verslepen om de breedte en hoogte te wijzigen.
Beweeg de muis hierheense-resizeDe rechteronderhoek verslepen om de breedte en hoogte te wijzigen.
Beweeg de muis hierheensw-resizeDe linkeronderhoek verslepen om de breedte en hoogte te wijzigen.
Beweeg de muis hierheenew-resizeBreedte in beide richtingen wijzigen, bijvoorbeeld bij een horizontale schuifregelaar of scheidingslijn.
Beweeg de muis hierheenns-resizeHoogte in beide richtingen wijzigen, bijvoorbeeld bij een verticale scheidingslijn.
Beweeg de muis hierheennesw-resizeDiagonaal slepen van rechtsboven naar linksonder, bijvoorbeeld aan de hoek van een paneel.
Beweeg de muis hierheennwse-resizeDiagonaal slepen van linksboven naar rechtsonder, bijvoorbeeld aan de greep rechtsonder op een paneel.
Beweeg de muis hierheen
Scrollen en zoomen3
all-scrollPijlen in alle richtingen: je kunt de inhoud in elke richting scrollen, bijvoorbeeld een kaart.
Beweeg de muis hierheenzoom-inVergrootglas met plusteken voor afbeeldingen of kaarten die je met een klik kunt vergroten.
Beweeg de muis hierheenzoom-outVergrootglas met minteken om een vergrote afbeelding met een klik weer te verkleinen.
Beweeg de muis hierheen
Testgebied: cursor in actie
Beweeg de muis over de voorbeelden, versleep de kaart, de scheidingslijn en de paneelhoek en klik op de afbeelding.
Knop
pointerUitgeschakelde knop
not-allowedTekstlink
Meer hierover staat in de Documentatie.
pointerInvoerveld
textVersleepbare kaart
Kaart
Sleep om te verplaatsen
grabgrabbingKolombreedte wijzigen
Kolom A · 50 %Kolom B · 50 %col-resizePaneelhoek verslepen
Panel
160 × 80 px
nwse-resizeLaadstatus
Wordt op de achtergrond geladen
Je kunt verder werken.
Even geduld
Dit gebied is geblokkeerd.
progresswaitZoombare afbeelding
zoom-inzoom-out
Overzicht
Wat is de CSS-eigenschap cursor?
De CSS-eigenschap cursor bepaalt welke muisaanwijzer verschijnt wanneer de muis boven een element staat. Zo laat je zien wat daar mogelijk is: het handje bij pointer betekent klikbaar, de tekstcursor betekent dat je tekst kunt selecteren en de doorgestreepte cirkel bij not-allowed betekent geblokkeerd. Zonder opgegeven waarde geldt auto en beslist de browser zelf.
Syntaxis
Eén trefwoord per regel is genoeg. Toestanden zoals :disabled of :active krijgen hun eigen cursor:
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
.card[draggable="true"] {
cursor: grab;
}
.card[draggable="true"]:active {
cursor: grabbing;
}Utility-klassen zoals cursor-pointer in Tailwind CSS gebruiken dezelfde declaratie cursor: pointer;. De tool kopieert alleen gewone CSS, geen klassen.
36 standaardwaarden
De CSS-specificatie kent 36 trefwoorden, van auto en pointer tot de 14 cursors voor formaatwijziging. Deze tool toont ze allemaal, gesorteerd op gebruiksdoel.
Wordt overgenomen
cursor geldt voor het element en alle onderliggende elementen, totdat een onderliggend element een eigen waarde instelt. Een cursor: pointer op de container geldt dus ook voor de tekst erin.
Het systeem tekent
CSS bepaalt alleen welke muisaanwijzer verschijnt. Hoe die eruitziet, bepalen het besturingssysteem en de browser. Daarom ziet die er op macOS, Windows en Linux verschillend uit.
Geen :hover nodig
De cursor verschijnt alleen zolang de muis boven het element staat. Stel cursor daarom rechtstreeks op het element in; een aparte :hover-regel is niet nodig.
Cursortypen
Alle 36 CSS-cursortypen in één overzicht
De tool groepeert de waarden van de CSS-eigenschap cursor op toepassing in zes groepen. Met het filter Toepassing toon je slechts één groep.
Algemeen3
De standaardwaarde auto, de gewone pijl default en none, waarmee je de muisaanwijzer verbergt.
autodefaultnone
Links en status5
Het handje voor klikbare elementen, hulp, contextmenu's en de twee laadstatussen progress en wait.
pointerhelpcontext-menuprogresswait
Selectie4
Horizontale en verticale tekstcursor, de plus voor tabelcellen en het dradenkruis voor precisiewerk.
textvertical-textcellcrosshair
Slepen en neerzetten7
Open en gesloten handje, verplaatscursor en feedback bij het neerzetten: kopiëren, koppelen, niet neer te zetten, niet toegestaan.
grabgrabbingmovecopyaliasno-dropnot-allowed
Grootte wijzigen14
14 resize-cursors voor randen, hoeken, kolommen en rijen, van n-resize tot nwse-resize.
col-resizerow-resizen-resizee-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resize
Scrollen en zoomen3
Scrollen in alle richtingen en het vergrootglas met plus of min voor afbeeldingen en kaarten.
all-scrollzoom-inzoom-out
Best practices
Welke CSS-cursor gebruik je wanneer?
De muisaanwijzer schept verwachtingen bij de gebruiker. Met deze regels maak je die waar.
pointer alleen voor klikbare elementen
Het handje wekt de verwachting dat een klik iets doet. Gebruik het voor links, knoppen en klikbare kaarten, maar niet voor tekst of vlakken zonder functie.
not-allowed voor uitgeschakelde elementen
Een uitgeschakelde knop krijgt cursor: not-allowed. Let op: met pointer-events: none verschijnt die cursor niet, omdat het element de muis niet detecteert.
grab en grabbing voor slepen
Iets wat je kunt verslepen, krijgt grab. Tijdens het slepen verandert dit in grabbing, bijvoorbeeld via :active of een klasse die je script instelt.
text voor invoervelden en tekst
Invoervelden hebben al een tekstcursor. Stel text alleen zelf in waar tekst echt kan worden geselecteerd of bewerkt.
progress in plaats van wait
Als iets op de achtergrond laadt en de pagina bruikbaar blijft, gebruik je progress. Gebruik wait alleen als de interface echt geblokkeerd is.
none alleen met alternatief
Een onzichtbare muisaanwijzer is verwarrend. cursor: none past bij games, video's op volledig scherm of een aangepaste cursor die de systeemaanwijzer vervangt.
Zo werkt het
Zo vind je de juiste CSS-cursor
Drie stappen, zonder registratie of installatie.
Stap 1
Cursor zoeken
Zoek op een waarde, een toepassing zoals resize of drag, of een status zoals disabled. Je kunt ook op groep filteren.
Stap 2
Cursor uitproberen
Beweeg je muis over het voorbeeld van een tegel of gebruik de voorbeelden in het testgebied om de echte cursor van je systeem te zien.
Stap 3
Declaratie kopiëren
Eén klik op Kopiëren zet precies de declaratie op het klembord, bijvoorbeeld cursor: not-allowed;. Voeg die toe aan je CSS-regel.
Aangepaste cursors
Aangepaste cursor instellen met url()
In plaats van een trefwoord kun je een eigen afbeelding als muisaanwijzer opgeven. Na de afbeeldings-URL volgen optioneel de coördinaten van de hotspot: het punt waarmee je klikt. Aan het einde staat altijd een trefwoord als alternatief voor als de afbeelding niet laadt.
.canvas {
cursor:
url("/cursors/pencil.svg") 2 30,
crosshair;
}PNG of SVG is geschikt. Browsers tonen aangepaste cursors tot maximaal 128 × 128 pixels; 32 × 32 is gebruikelijk. In een cursorafbeelding moet het klikpunt duidelijk herkenbaar zijn.
Meer ontdekken
Meer tools
Online HTML- en CSS-formatter (code netjes opmaken)
Formatteer HTML en CSS online met inspringing en nette opmaak, inclusief automatische taalherkenning. Werkt volledig in de browser, zonder upload.
Gebouwd door Luca Stanek
SVG naar PNG omzetten (SVG to PNG)
NieuwZet SVG om naar PNG: sla vectorafbeeldingen op elke grootte haarscherp op als PNG, JPG of WebP, met transparante achtergrond en sjablonen voor favicons, Discord-emoji's en Minecraft-servericonen. Werkt volledig in je browser.
Gebouwd door Luca Stanek
Kleurkiezer
Kleuren direct omzetten tussen HEX, RGB, HSL, HSV en CMYK, de dichtstbijzijnde CSS-kleurnaam vinden en het WCAG-contrast met zwart/wit controleren – volledig in de browser.
Gebouwd door Justin Schuessler
Contrastcontrole
Bereken de WCAG-contrastverhouding tussen twee kleuren live en toets deze aan AA/AAA en UI-componenten, volledig in de browser.
Gebouwd door Justin Schuessler
Kleurenschemagenerator
Genereer live complementaire, analoge, triadische en andere kleurenschema's op basis van één kleur — niets wordt opgeslagen of verzonden.
Gebouwd door Justin Schuessler
Favicon-generator
Maak van een afbeelding een complete set favicons: favicon.ico, Apple-Touch-Icon, Android-Chrome-iconen, site.webmanifest en een kant-en-klaar HTML-fragment om te kopiëren. Alles gebeurt in jouw browser.
Gebouwd door Jakub Martyniak
FAQ
Veelgestelde vragen
Korte antwoorden over de CSS-eigenschap cursor en deze tool.
36 trefwoorden in zes groepen: Algemeen (auto, default, none), Links en status (pointer, help, context-menu, progress, wait), Selectie (text, vertical-text, cell, crosshair), Drag-and-drop (grab, grabbing, move, copy, alias, no-drop, not-allowed), 14 cursors voor formaatwijziging en Scrollen en zoomen (all-scroll, zoom-in, zoom-out). Je kunt ook eigen afbeeldingen gebruiken via url().
pointer is geschikt voor alles wat bij een klik iets doet: links, knoppen, klikbare kaarten of pictogrammen. Links tonen standaard al het handje, knoppen in veel browsers niet. Gebruik pointer niet voor tekst of vlakken zonder functie. cursor: hand is een oude, niet-gestandaardiseerde waarde uit vroege versies van Internet Explorer en hoort daarom niet bij de 36 waarden in de tool. Voor het handje gebruik je cursor: pointer;.
Stel op het element cursor: auto in om de browser te laten kiezen, of cursor: default voor de gewone pijl. Omdat cursor wordt overgeërfd, kun je een pointer van het bovenliggende element rechtstreeks op het onderliggende element overschrijven. Beide waarden vind je in de tool onder Algemeen.
cursor: not-allowed, de doorgestreepte cirkel dus. Als je op de uitgeschakelde knop ook pointer-events: none instelt, verschijnt de cursor niet meer, omdat het element de muis dan negeert. In het testgebied zie je de knop met not-allowed.
grab is de open hand boven een element dat je kunt verslepen; grabbing is de gesloten hand tijdens het slepen. move toont gekruiste pijlen en past bij elementen die je vrij kunt verplaatsen, zoals vensters of widgets.
progress toont een pijl met een laadsymbool: er wordt iets op de achtergrond geladen, maar de pagina blijft bruikbaar. wait toont alleen het laadsymbool en betekent dat je de interface tijdelijk niet kunt gebruiken. Voor de meeste laadprocessen op het web past progress.
Met cursor: url(cursor.svg) 2 30, crosshair; geef je een afbeelding en optioneel de hotspot op, altijd gevolgd door een trefwoord als alternatief. Browsers tonen eigen cursors alleen tot 128 × 128 pixels. Deze tool toont de 36 standaardwaarden; eigen afbeeldingen kun je hier niet uploaden.
CSS bepaalt alleen welke cursor verschijnt. Het besturingssysteem en de browser tekenen hem, dus hij ziet er op macOS, Windows en Linux anders uit. Touchapparaten hebben geen muisaanwijzer: daarop toont de tool een lijst met beschrijvingen en kopieerknoppen. Alles werkt in je browser, zonder upload.
Nog vragen?
Contact opnemen met supportJe website heeft betrouwbare hosting nodig
Met een ZAP-Hosting-VPS staat je site betrouwbaar online.
Geen installatie. Geen risico. Binnen enkele seconden online.
Op zoek naar meer tools? Alle ontwikkelaarstools bekijken
Voorkeursbron bij Google
