The Cursor Properties

---

Home/DHTML/CSS/Cursors

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>

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.

---

Partners

---

CoolHomepages | Web Design Library | Website Content

---

The tutorials and articles on these pages are © 1997-2007 by John Pollock and may not be reposted without written permission from the author, and may not be reprinted for profit. Disclaimer.

---