CSS and Cursors

By Joe Burns

Ah, the cursor. Some like the pointing finger, some like that I-beam-looking thing, and others try to lose the cursor altogether. Whatever your cup of tea, CSS version 2.0 is trying to help. Internet Explorer 4.0 has supported these commands as of 1/17/98. I'm sure Navigator won't be too far behind.
Seventeen different cursor properties have been incorporated into standard CSS so you can be pretty sure some of these will work. I say "some of these" because the cursor look depends a lot more on the operating system and settings your user has set. If you didn't know it, you can set your cursor to a whole bunch of different standard settings and even install new cursors that animate. At one time, my cursor was Snoopy on his Sopwith Camel; when I clicked on something it became a TV set with snow on the screen. I'm just a fun guy, I guess.

So I offer this chart as help. Each link points back to this page so even if you click, it'll just reload. Plus the link will be a description of what you should see.
The Style Sheet command is incorporated by adding the STYLE="--" format into the anchor command like so:

Of course, you can also put these into a Style Block and alter the cursor for all your links at once:

<STYLE>
link {cursor: crosshair}
<STYLE>

So, here we go. These are the chosen seventeen. Roll your pointer over the top. Depending on a lot of factors, you may get it or you may not.

cursor: auto (uses what is set by user)

cursor: crosshair (should produce a cross)

cursor: default (cursor remains as it is)

cursor: e-resize (arrow pointing right)

cursor: hand (the traditional pointing hand)

cursor: help (a Question Mark should appear)

cursor: move (a cross with arrows on the tips)

cursor: n-resize (an arrow pointing north or up)

cursor: ne-resize (an arrow pointing northeast)