Login | Contact Us | Site Map | Resources

CSS Styling

Home > CSS Tutorial > CSS Cursors

CSS Cursors

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.