Cursor veranderen met CSS

In dit artikel leer je hoe je de cursor kunt veranderen met Cascading Style Sheets (CSS). Dit werkt echter alleen met nieuwere versies van Internet Explorer (versie 4 en hoger).
Je moet het dus zien als een leuk trucje en het niet te vaak te gebruiken in een webpagina.

De verschillende Codes en Cursors

Dit is de code die je moet gebruiken voor het veranderen van de cursor bij een link:

<style>
A:link {
cursor: crosshair;
}
</style>

In de code hierboven kun je "crosshair" vervangen met één van de codes hieronder als je een andere cursor wilt.

Cursor Naam	Voorbeeld (ga met de muis over onderstaande teksten)
auto	Wordt weergegeven zoals ingesteld op het systeem van de gebruiker
crosshair	Ziet eruit als een kruis
default	De standaardinstelling (normale pijl)
hand	Het handje dat je normaal ziet bij een link
move	Het lijkt alsof je iets moet verplaatsen
text	Wat je ziet als een je met de muis op tekst gaat staan
wait	Het bekende zandlopertje!
help	Een vraagteken verschijnt naast de pijl
n-resize	Een pijl naar het noorden
s-resize	Een pijl naar het zuiden
e-resize	Een pijl naar het oosten
w-resize	Een pijl naar het westen
ne-resize	Een pijl naar het Noordoosten
nw-resize	Een pijl naar het Noordwesten
se-resize	Een pijl naar het Zuidoosten
sw-resize	Een pijl naar het Zuidwesten

Je kunt de cursor ook weergeven wanneer je met de muis over gewone tekst gaat door bijvoorbeeld de <span> tag te gebruiken.

Zo dus:

<span style="cursor:crosshair">Ga hier met de muis op staan...</span>

Het resultaat wordt dan:

Ga hier met de muis op staan...

MijnHomepage Tip