CSS cursor eigenschap

Definitie en gebruik

De cursor-eigenschap bepaalt het type cursor (vorm) dat moet worden weergegeven.

Deze eigenschap definieert de cursorvorm die wordt gebruikt wanneer de muispijl zich binnen het bereik van de rand van een element bevindt (hoewel CSS2.1 niet definieert welke rand de grens bepaalt).

Zie ook:

CSS tutorial:CSS positie

HTML DOM referentiehandleiding:cursor-eigenschap

Voorbeeld

Enkele verschillende cursors:

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

Probeer het zelf

CSS syntaxis

cursor: value;

Waarde van de eigenschap

Waarde Beschrijving
url

URL van de aangepaste cursor die moet worden gebruikt.

Opmerking:Definieer altijd een standaard cursor aan het einde van deze lijst, in geval van ontbrekende cursors die zijn gedefinieerd door een URL.
default Standaard cursor (meestal een pijl).
auto Standaard. De cursor die door de browser is ingesteld.
crosshair De cursor wordt weergegeven als een kruis.
pointer De cursor wordt weergegeven als een pointer die een link wijst (een hand).
move Deze cursor geeft aan dat een object kan worden verplaatst.
e-resize Deze cursor geeft aan dat de rand van het rechthoekige vak naar rechts kan worden verschoven (oost).
ne-resize Deze cursor geeft aan dat de rand van het rechthoekige vak zowel naar boven als naar rechts kan worden verschoven (noord/oost).
nw-resize Deze cursor geeft aan dat de rand van het rechthoekige vak zowel naar boven als naar links kan worden verschoven (noord/west).
n-resize Deze cursor geeft aan dat de rand van het rechthoekige vak naar boven kan worden verschoven (noord).
se-resize Deze cursor geeft aan dat de rand van het rechthoekige vak zowel naar beneden als naar rechts kan worden verschoven (zuid/oost).
sw-resize Deze cursor geeft aan dat de rand van het rechthoekige vak zowel naar beneden als naar links kan worden verschoven (zuid/west).
s-resize Deze cursor geeft aan dat de rand van het rechthoekige vak naar beneden kan worden verschoven (zuid).
w-resize Deze cursor geeft aan dat de rand van het rechthoekige vak links kan worden verschoven (west).
text Deze cursor geeft aan dat er tekst beschikbaar is.
wait Deze cursor geeft aan dat het programma bezig is (meestal een klok of een zeef).
help Deze cursor geeft aan dat er beschikbare hulp beschikbaar is (meestal een vraagteken of een ballon).

Technische details

Standaardwaarde: auto
Inheritance: ja
Versie: CSS2
JavaScript syntaxis: object.style.cursor="crosshair"

TIY voorbeeld

Cursor veranderen
Dit voorbeeld demonstreert hoe je de cursor kunt veranderen.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
5.0 5.5 4.0 5.0 9.6

Opmerking:Opera 9.3 en Safari 3 ondersteunen dit niet url Waarde.