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 lijsturl(…), 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 alsnot-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 alsmove
.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 alsns-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
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 value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified, but with url values made absolute |
Animation type | discrete |
Browser compatibility
BCD tables only load in the browser