Cursors
Written by Jen

Cursors are tricky things. When you customize them, they might not show up properly because of your browser. Most cursors should show up on IE 4+ or NS 6+. In this tutorial, we'll only give you the most common ones that work. Others not displayed here will be up to you to find.

For a basic body cursor, you would use:

body {cursor: default;}

This is the default cursor you have right now. Below are the options for the cursor property. Just hover over the names for the effect.

crosshair
hand
move
text
wait
help
n-resize
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
progress
no-drop
vertical-text
all-scroll
col-resize
row-resize

If it comes back to the default one for any of the above, it means your browser doesn't support the cursor.

You can also make your own cursors. These images usually end in .ani or .cur and need to be created and uploaded in a cursor-friendly place. Most graphics programs don't support cursors, same with image hosts. But if you luck out and you can make and upload cursors, you can put them on your page by using the following:

body {cursor: url('your cursor url');}

It doesn't always have to be your main page cursor that you change. You can change the cursor for anything. As long as you have an element, you are allowed to change its cursor. Link, tables, divs, classes, ids etc. are all changeable.