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
Computed valueas specified, but with url values made absolute
Animation typediscrete

Browser compatibility

BCD tables only load in the browser

See also