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
