Lesson-11 (Cursor Properties)

 

Here are some explanations and examples of the css cursor properties. These may not yet work in Netscape. You may want to use IE4+ to view the examples on this page.

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

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

 

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