cursor

het CSS-eigenschap cursor geeft aan welke muiscursor moet worden weergegeven wanneer de muisaanwijzer zich boven een element bevindt.

Syntax

/* Keyword value */
cursor: pointer;
cursor: auto;

/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

De eigenschap cursor wordt opgegeven als geen of meer <url> waarden, gescheiden door komma's, gevolgd door één verplichte zoekwoordwaarde. Elke <url> zou naar een afbeeldingsbestand moeten wijzen. De browser probeert de eerste opgegeven afbeelding te laden, terug te vallen naar de volgende als dit niet kan, en terug te vallen naar de sleutelwoordwaarde als er geen afbeeldingen kunnen worden geladen (of als geen enkele waarde is opgegeven).

Elke <url> kan optioneel worden gevolgd door een paar spaties gescheiden nummers die de coördinaten  <x><y> representeren. Hiermee wordt de hotspot van de cursor ingesteld ten opzichte van de linkerbovenhoek van de afbeelding.

Bijvoorbeeld , dit specifeerd twee afbeeldingen die gebruikmaken van <url> waarden, voorzien van <x><y> coördinaten voor de tweede en terugvallen op de progress sleutelwoordwaarde als geen van beide afbeeldingen kunnen worden geladen:

cursor: url(one.svg), url(two.svg) 5 5, progress;

Values

<url>
Een url(…) of een door komma's gescheiden lijst url(…), url(…), …, wijzend naar een afbeeldingsbestand. Meer dan één <url> kan als fallbacks worden aangeboden, voor het geval sommige cursorbeeldtypen niet worden ondersteund. Een niet-URL-fallback (een of meer sleutelwoorden) moet aan het einde van de fallback-lijst staan. Zie URL-waarden gebruiken voor de cursoreigenschapsing voor meer informatie.
<x> <y>
Optionele x- en y-coördinaten. Twee niet-unitaire niet-negatieve getallen van minder dan 32.
Keyword values

Beweeg uw muis over waarden om hun live uiterlijk in uw browser te zien:

Categorie CSS value Actual Description
Algemeen auto De browser bepaalt de cursor die moet worden weergegeven op basis van de context. bv, text bij zwevende tekst.
default default.gif De platform afhankelijke basis cursor. Het is meestal een pijl.
none Er wordt geen cursor weergegeven.
Links & status context-menu context-menu.png Een contextmenu is beschikbaar.
help help.gif Help-informatie is beschikbaar.
pointer pointer.gif Het element kan worden geactiveerd door erop te klikken. Dit wordt bijvoorbeeld gebruikt, bij het zweven boven links. Typisch een afbeelding van een hand.
progress progress.gif Het programma is bezig in de achtergrond, de gebruiker kan nog steeds een interactie aangaan met het interface (dit integenstelling met wait).
wait wait.gif Het programma is bezig en de gebruiker kan geen interactie ondergaan met het interface (dit in tegenstelling met progress). Is soms een afbeelding van een zandloper of van een horloge.
Selection cell cell.gif

De tabel cel kan geslecteerd worden.

crosshair crosshair.gif

Kruis cursor, vaak gebruikt om een selectie in een bitmap aan te duiden.

text text.gif De tekst kan worden geselecteerd. Meestal in de vorm van een I-balk.
vertical-text vertical-text.gif De verticale tekst kan worden geslecteerd. Meestal in de vorm van een zijdelingse I-beam.
Drag & drop alias alias.gif Een alias of shortcut wordt gecreëerd.
copy copy.gif Iets kan worden gekopieerd.
move move.gif Iets kan worden verplaatst.
no-drop no-drop.gif Een item mag niet op de huidige locatie worden geplaatst.
bug 275173: Op Windows en Mac OS X, no-drop is hetzelfde als not-allowed.
not-allowed not-allowed.gif Iets kan niet worden gedaan.
Resize & scrolling all-scroll all-scroll.gif Iets kan gescrold worden in elke richting (pannend).
bug 275174: Op Windows, all-scroll is hetzelfde als move.
col-resize col-resize.gif De item/kolom groote kan verticaal worden aangepast. Vaak weergegeven als pijlen die links en rechts wijzen met een verticale balk tussen beide.
row-resize row-resize.gif De item/kolom groote kan horizontaal worden aangepast. Vaak weergegeven als pijlen die boven en onder wijzen met een horizontale balk tussen beide.
n-resize Example of a resize towards the top cursor

Een rand kan bewogen worden. Bijvoorbeeld de  se-resize cursor wordt gebruikt waneer een beweging start van de zuid-oost hoek van een box.

In sommige omgevingen wordt een gelijk bi-directioneel rezise cursor weergegeven.Bijvoorbeeld, n-resize ens-resize zijn hetzelfde als ns-resize.

e-resize Example of a resize towards the right cursor
s-resize Example of a resize towards the bottom cursor
w-resize Example of a resize towards the left cursor
ne-resize Example of a resize towards the top-right corner cursor
nw-resize Example of a resize towards the top-left corner cursor
se-resize Example of a resize towards the bottom-right corner cursor
sw-resize Example of a resize towards the bottom-left corner cursor
ew-resize 3-resize.gif Bi-directioneel resize cursor.
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
Zoom zoom-in zoom-in.gif

Iets kan worden in- of uitvergroot.

zoom-out zoom-out.gif
Grab grab grab.gif

Iets kan worden vastgepakt. (Gesleept worden om te verplaatsen)

grabbing grabbing.gif

Formal syntax

[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]

Usage notes

Hoewel de specificaties geen grootte limitaties defineerd voor cursor, kunnen individueleuser agents kiezen dit wel te doen. Cursor aanpassingen die gebruik maken van afbeeldingen die groter zijn dan de size range gesuporteerd door de browser worden in het algemeen genegeerd.

Controleer de Browser compatibility tabel voor notities i.v.m. cursor grootte limieten.

Examples

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
} 

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

Specifications

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'cursor' in that specification.
Recommendation Toevoeging van verschillend sleutelwoorden and positionerings syntaxt voor url().
CSS Level 2 (Revision 1)
The definition of 'cursor' in that specification.
Recommendation Initiële definitie.
Initial valueauto
Applies toall elements
Inheritedyes
Mediaas each of the properties of the shorthand:
Computed valueas specified, but with url values made absolute
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome voor AndroidFirefox voor AndroidOpera voor AndroidSafari op iOSSamsung Internet
cursorChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1
Opmerkingen
Volledige ondersteuning 1
Opmerkingen
Opmerkingen Starting in Firefox 67, the maximum size allowed for custom cursors is 32x32 pixels due to cursors being misused by certain malicious sites.
IE Volledige ondersteuning 4
Opmerkingen
Volledige ondersteuning 4
Opmerkingen
Opmerkingen In Internet Explorer 11, when cursor is applied to an element and this element is underneath an open <select> menu and the user hovers over a <select> menu item that's on top of said element, the cursor for said element will be displayed rather than the <select>'s normal cursor. See bug 817822.
Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android Volledige ondersteuning JaSafari iOS Volledige ondersteuning 1Samsung Internet Android ?
aliasChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5IE Volledige ondersteuning 10Opera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
all-scrollChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5IE Volledige ondersteuning 6Opera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
autoChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 4Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
Bidirectional resize cursors (ew-resize, nesw-resize, ns-resize, and nwse-resize)Chrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5IE Volledige ondersteuning 10Opera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
cellChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5IE Volledige ondersteuning 10Opera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
col-resizeChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5IE Volledige ondersteuning 6Opera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
context-menuChrome Volledige ondersteuning 1
Opmerkingen
Volledige ondersteuning 1
Opmerkingen
Opmerkingen This cursor is only supported on macOS and Linux.
Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5
Opmerkingen
Volledige ondersteuning 1.5
Opmerkingen
Opmerkingen This cursor is only supported on macOS and Linux.
IE Volledige ondersteuning 10Opera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18
Opmerkingen
Volledige ondersteuning 18
Opmerkingen
Opmerkingen This cursor is only supported on macOS and Linux.
Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
copyChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5IE Volledige ondersteuning 10Opera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
crosshairChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 4Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
defaultChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 4Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
Grab cursors (grab and grabbing)Chrome Volledige ondersteuning 68
Opmerkingen
Volledige ondersteuning 68
Opmerkingen
Opmerkingen Chrome also continues to support the prefixed versions.
Volledige ondersteuning 1
Voorgevoegd Opmerkingen
Voorgevoegd Vereist het leveranciersvoorvoegsel: -webkit-
Opmerkingen Chrome 22 added Windows support.
Edge Volledige ondersteuning 14Firefox Volledige ondersteuning 27
Volledige ondersteuning 27
Volledige ondersteuning 1.5
Voorgevoegd
Voorgevoegd Vereist het leveranciersvoorvoegsel: -moz-
IE Geen ondersteuning NeeOpera Volledige ondersteuning 55
Opmerkingen
Volledige ondersteuning 55
Opmerkingen
Opmerkingen Opera also continues to support the prefixed versions.
Volledige ondersteuning 15
Voorgevoegd Opmerkingen
Voorgevoegd Vereist het leveranciersvoorvoegsel: -webkit-
Opmerkingen Opera 22 added Windows support.
Safari Volledige ondersteuning 11
Volledige ondersteuning 11
Volledige ondersteuning 4
Voorgevoegd
Voorgevoegd Vereist het leveranciersvoorvoegsel: -webkit-
WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 68
Opmerkingen
Volledige ondersteuning 68
Opmerkingen
Opmerkingen Chrome also continues to support the prefixed versions.
Volledige ondersteuning 18
Voorgevoegd Opmerkingen
Voorgevoegd Vereist het leveranciersvoorvoegsel: -webkit-
Opmerkingen Chrome 22 added Windows support.
Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
helpChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 4Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
inheritChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 8Opera Volledige ondersteuning 9Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
moveChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 4Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
no-dropChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5IE Volledige ondersteuning 6Opera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
noneChrome Volledige ondersteuning 5Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 3IE Volledige ondersteuning 9Opera Volledige ondersteuning 15Safari Volledige ondersteuning 5WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 4.2Samsung Internet Android ?
not-allowedChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5IE Volledige ondersteuning 6Opera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
pointerChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 6Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
progressChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 6Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
row-resizeChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5IE Volledige ondersteuning 6Opera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
textChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 4Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
Unidirectional resize cursors (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize)Chrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 4Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
url()Chrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5
Opmerkingen
Volledige ondersteuning 1.5
Opmerkingen
Opmerkingen Firefox 4 added macOS support.
IE Volledige ondersteuning 6Opera Volledige ondersteuning 15Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
url() positioning syntax
Experimenteel
Chrome Volledige ondersteuning 1Edge Geen ondersteuning NeeFirefox Volledige ondersteuning 1.5
Opmerkingen
Volledige ondersteuning 1.5
Opmerkingen
Opmerkingen Firefox 4 added macOS support.
IE Geen ondersteuning NeeOpera Volledige ondersteuning 15Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
vertical-textChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1.5IE Geen ondersteuning NeeOpera Volledige ondersteuning 10.6Safari Volledige ondersteuning 3WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
waitChrome Volledige ondersteuning 1Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 1IE Volledige ondersteuning 4Opera Volledige ondersteuning 7Safari Volledige ondersteuning 1.2WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 18Firefox Android Geen ondersteuning NeeOpera Android ? Safari iOS Volledige ondersteuning 1Samsung Internet Android ?
Zoom cursors (zoom-in and zoom-out)Chrome Volledige ondersteuning 37
Volledige ondersteuning 37
Volledige ondersteuning 1
Voorgevoegd
Voorgevoegd Vereist het leveranciersvoorvoegsel: -webkit-
Edge Volledige ondersteuning 12Firefox Volledige ondersteuning 24
Volledige ondersteuning 24
Volledige ondersteuning 1
Voorgevoegd
Voorgevoegd Vereist het leveranciersvoorvoegsel: -moz-
IE Geen ondersteuning NeeOpera Volledige ondersteuning 24
Volledige ondersteuning 24
Geen ondersteuning 15 — 23
Voorgevoegd
Voorgevoegd Vereist het leveranciersvoorvoegsel: -webkit-
Safari Volledige ondersteuning 9
Volledige ondersteuning 9
Volledige ondersteuning 3
Voorgevoegd
Voorgevoegd Vereist het leveranciersvoorvoegsel: -webkit-
WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 37
Volledige ondersteuning 37
Volledige ondersteuning 18
Voorgevoegd
Voorgevoegd Vereist het leveranciersvoorvoegsel: -webkit-
Firefox Android Geen ondersteuning NeeOpera Android Volledige ondersteuning 24
Volledige ondersteuning 24
Geen ondersteuning 14 — 24
Voorgevoegd
Voorgevoegd Vereist het leveranciersvoorvoegsel: -webkit-
Safari iOS Volledige ondersteuning 1Samsung Internet Android ?

Legenda

Volledige ondersteuning  
Volledige ondersteuning
Geen ondersteuning  
Geen ondersteuning
Compatibiliteit onbekend  
Compatibiliteit onbekend
Experimenteel. Het verwachte gedrag kan in de toekomst veranderen.
Experimenteel. Het verwachte gedrag kan in de toekomst veranderen.
Zie implementatieopmerkingen
Zie implementatieopmerkingen
Vereist een leveranciersvoorvoegsel of een andere naam voor gebruik.
Vereist een leveranciersvoorvoegsel of een andere naam voor gebruik.

See also