--- title: cursor slug: Web/CSS/cursor tags: - CSS - CSS eigenschappen - Cursor - Custom Cursor - Reference - UI - mouse - pijl - pointer translation_of: Web/CSS/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 {{cssxref ("<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> {{experimental_inline}}

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	Description
Algemeen	`auto`	De browser bepaalt de cursor die moet worden weergegeven op basis van de context. bv, `text` bij zwevende tekst.
	`default`	De platform afhankelijke basis cursor. Het is meestal een pijl.
	`none`	Er wordt geen cursor weergegeven.
Links & status	`context-menu`	Een contextmenu is beschikbaar.
	`help`	Help-informatie is beschikbaar.
	`pointer`	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`	Het programma is bezig in de achtergrond, de gebruiker kan nog steeds een interactie aangaan met het interface (dit integenstelling met `wait`).
	`wait`	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`	De tabel cel kan geslecteerd worden.
	`crosshair`	Kruis cursor, vaak gebruikt om een selectie in een bitmap aan te duiden.
	`text`	De tekst kan worden geselecteerd. Meestal in de vorm van een I-balk.
	`vertical-text`	De verticale tekst kan worden geslecteerd. Meestal in de vorm van een zijdelingse I-beam.
Drag & drop	`alias`	Een alias of shortcut wordt gecreëerd.
	`copy`	Iets kan worden gekopieerd.
	`move`	Iets kan worden verplaatst.
	`no-drop`	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`	Iets kan niet worden gedaan.
Resize & scrolling	`all-scroll`	Iets kan gescrold worden in elke richting (pannend). {{bug("275174")}}: Op Windows, `all-scroll` is hetzelfde als `move`.
	`col-resize`	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`	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`	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` en`s-resize` zijn hetzelfde als `ns-resize`.
	`e-resize`
	`s-resize`
	`w-resize`
	`ne-resize`
	`nw-resize`
	`se-resize`
	`sw-resize`
	`ew-resize`	Bi-directioneel resize cursor.
	`ns-resize`
	`nesw-resize`
	`nwse-resize`
Zoom	`zoom-in`	Iets kan worden in- of uitvergroot.
Zoom	`zoom-out`	Iets kan worden in- of uitvergroot.
Grab	`grab`	Iets kan worden vastgepakt. (Gesleept worden om te verplaatsen)
Grab	`grabbing`

Formal syntax

{{csssyntax}}

Usage notes

Hoewel de specificaties geen grootte limitaties defineerd voor cursor, kunnen individuele{{Glossary("user agent", "user 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 {{anch("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
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}	{{Spec2('CSS3 Basic UI')}}	Toevoeging van verschillend sleutelwoorden and positionerings syntaxt voor `url()`.
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}	{{Spec2('CSS2.1')}}	Initiële definitie.