CSS cursor property

Posted September 5th, 2009 in HTML and CSS

Occasionally I've needed to specifically make the mouse a hand with HTML and CSS when mousing over a particular area and I'm always forgetting the property used to set it, so this quick post is for my own quick reference, and shows example of the other property values too.

cursor: pointer

To make the mouse a hand set the "cursor" property to "pointer", for example:

#example {
    cursor: pointer;
}

This paragraph will make the mouse cursor a pointer when you mouse over it.

Note that it's "pointer" and not "hand" which is a mistake I commonly make myself.

Other values

There are a number of other property values which can be useful. These are listed below and will show the effect each has as you mouse over them.

auto

crosshair

default

e-resize

help

move

n-resize

ne-resize

nw-resize

pointer

progress

s-resize

se-resize

sw-resize

text

w-resize

wait