cursor

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

De bron voor dit interactieve voorbeeld is opgeslagen in een GitHub-repository. Als u wilt bijdragen aan het interactieve voorbeeldenproject, kunt u het klonen van https://github.com/mdn/interactive-examples en stuur ons een pull-aanvraag.

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		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 ens-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-out
Grab	grab		Iets kan worden vastgepakt. (Gesleept worden om te verplaatsen)
	grabbing

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

Browser compatibility

See also

• Using URL values for the cursor property
• pointer-events
• Cursor Property (MSDN)