- Web Development Tutorials

The Cursor Properties

How to change the cursor with style sheets
home    DHTML Pit Stop  |  CSS Index  |  CSS Properties  |  HTML List


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 just:


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 HREF="#" style="cursor:crosshair">A Cross Link</A>

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:

<SPAN style="cursor:wait">Should You Wait for This?</SPAN>

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 Type Example (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

Well, that does it for now. Let's move on to: More on Backgrounds.

By: John Pollock next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy