Uncle Jim's Web Designs
CSS Cursor Properties
Author: Jim Stiles

The Cursor Properties

How to change the cursor with style sheets

Here are some explanations and examples of the css cursor properties.

With style sheets, you can change the cursor when the mouse moves over a certain area or over a link.
The command is simple: cursor:type

Where we will replace "type" with the type of cursor we want. So, let's say we want a crosshair (looks like a cross) when someone moves over a link. We just add the style="cursor:crosshair" attribute to the link tag:

A Cross Link

This would give us the following link, move your mouse over it to try it out:

A Cross Link

You can do it over text as well. You can define a class or just drop it inline with a span tag:

Should You Wait for This?


This will give us the old hourglass as if we are waiting on something when we mouse over the text. Try it out below:

Should You Wait for This?


There are some other cursor types as well. Here is a list of the other types of cursors you can use, move your mouse over the text on the right side to see the example:

Cursor TypeExample (Move Mouse Over Text)
auto Shows it according to how the viewer has it set (plain)
crosshair Looks like a cross
default Makes the cursor stay the same
move Looks like you should be moving something
hand The hand you usually see over links
help A question mark beside the arrow
text The bar you see when the mouse is over text
wait The "waiting" hourglass!
n-resize An arrow- North
s-resize An arrow- South
e-resize An arrow- East
w-resize An arrow- West
ne-resize An arrow- NorthEast
nw-resize An arrow- NorthWest
se-resize An arrow- SouthEast
sw-resize An arrow- SouthWest