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