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;

Het eigenschap cursor wordt opgegeven als nul of meer <url> waarden, gescheiden door komma's, gevolgd door één verplichte zoekwoordwaarde.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 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.

Dit specificeert bijvoorbeeld twee afbeeldingen die gebruikmaken van <url> waarden, voorzien van <x><y> coördinaten voor de tweede en terugvallen op het 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, gelijk aan text gelijk aan tekst bij zwevende tekst.
	default		Er is geen speciaal gedrag aanwezig. Het is een typisch 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		The program is busy in the background, but the user can still interact with the interface (in contrast to wait).
	wait		The program is busy, and the user can't interact with the interface (in contrast to progress). Sometimes an image of an hourglass or a watch.
Selection	cell		The table cell can be selected.
	crosshair		Cross cursor, often used to indicate selection in a bitmap.
	text		The text can be selected. Typically the shape of an I-beam.
	vertical-text		The vertical text can be selected. Typically the shape of a sideways I-beam.
Drag & drop	alias		An alias or shortcut is to be created.
	copy		Something can be copied.
	move		Something can be moved.
	no-drop		An item may not be dropped at the current location. bug 275173: On Windows and Mac OS X, no-drop is the same as not-allowed.
	not-allowed		Something can't be done.
Resize & scrolling	all-scroll		Something can be scrolled in any direction (panned). bug 275174: On Windows, all-scroll is the same as move.
	col-resize		The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
	row-resize		The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
	n-resize		Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. In some environments, an equivalent bidirectional resize cursor is shown. For example, n-resize and s-resize are the same as ns-resize.
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		Bidirectional resize cursor.
	ns-resize
	nesw-resize
	nwse-resize
Zoom	zoom-in		Something can be zoomed (magnified) in or out.
	zoom-out
Grab	grab		Something can be grabbed (dragged to be moved).
	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 ] ]

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)