CSS - Cursor veranderen


Standaard heb je de gewone muis en zodra je over een link gaat dan zal de muis veranderen in een handje. Met CSS kun je invloed uitoefenen op hoe de muis wordt getoond en deze kan eventueel gewijzigd worden op bepaalde momenten in een andere cursor die standaard in Windows aanwezig is, bijvoorbeeld bij een mouse-over.

Wijzigen van de muis kan met de onderstaande code.

body {
        cursor:move;
}


Hieronder zie je een lijstje met de muizen die je kunt gebruiken om de standaard muis te vervangen. Deze cursors kun je in actie zien door met de muis op de code te gaan staan.

Cursor "Verplaatst"

<style type="text/css">
body {
cursor:move;
}
</style>

Cursor "Diagonaal"

<style type="text/css">
body {
cursor:ne-resize;
}
</style>

Cursor "Crosshair"

<style type="text/css">
body {
cursor:crosshair;
}
</style>

Cursor "Handje"

<style type="text/css">
body {
cursor:hand;
cursor:pointer;
}
</style>

Cursor "Tekst"

<style type="text/css">
body {
cursor:text;
}
</style>

Cursor "Zandloper"

<style type="text/css">
body {
cursor:wait;
}
</style>

Cursor "Horizontaal"

<style type="text/css">
body {
cursor:e-resize;
}
</style>

Cursor "Verticaal"

<style type="text/css">
body {
cursor:n-resize;
}
</style>

Cursor "Diagonaal"

<style type="text/css">
body {
cursor:nw-resize;
}
</style>

Cursor "Help"

<style type="text/css">
body {
cursor:help;
}
</style>