What is black and white and red all over? A sunburnt zebra! Why does the mouse pointer change when it hovers over this paragraph? Because I told it to. How did I tell it to? CSS!

Modern browsers support seventeen different values that can be applied to the cursor property to replicate different icons. Hovering over each description below will give you an example of each icon.

Value	Description
auto	This Is the Default Cursor Set By Each Browser When Hovering Over Text
default	This Is the Default Cursor When Not Hovering Over Text
pointer	This Cursor Looks Like A Finger Pointing
text	This Cursor Indicates the Mouse Is Hovering Over Text
crosshair	This Cursor Looks Like Crosshair
help	This Cursor Should Indicate That Help Is Available
move	This Cursor Indicates That Something Can Be Moved
wait	This Cursor Indicates That Something Is Busy
progress	This Cursor Indicates That Something Is In Progress
n-resize	This Cursor Indicates That A Box Edge Can Be Moved North (Up)
s-resize	This Cursor Indicates That A Box Edge Can Be Moved South (Down)
e-resize	This Cursor Indicates That A Box Edge Can Be Moved East (Right)
w-resize	This Cursor Indicates That A Box Edge Can Be Moved West (Left)
ne-resize	This Cursor Indicates That A Box Edge Can Be Moved North/East (Up & Right)
nw-resize	This Cursor Indicates That A Box Edge Can Be Moved North/West (Up & Left)
se-resize	This Cursor Indicates That A Box Edge Can Be Moved South/East (Down & Right)
sw-resize	This Cursor Indicates That A Box Edge Can Be Moved South/West (Down & Left)

Applying a value to the cursor property is pretty much self-explanatory:

cursor: help;
cursor: move;
cursor: pointer;


Don't have too much fun with cursors, because you run the risk of confusing your visitors.