CSS and Cursors
Don’t like the hand cursor that appears over your links? Want arrows denoting where pages are going to open on your page, or help marks appearing on certain links? Well, you’re going to need a few of these classy pointer codes then, aren’t you? Yes.
This page was last updated on 2007-05-23
Browser Compatibility Note:
These commands are part of CSS2, and are supported by modern browsers like » Firefox, » Safari and » Opera; and in » IE all the way down to version 4. They’re safe to use.
Whether these work properly depends largely on how your reader’s computers are set up. If they have changed their cursors, their modified cursors will pop up. No big deal really, and the majority of people will get what you’d expect.
To add these to one or two links, add this attribute to their a tags:
style="cursor: target; "
If you want to add it to an entire class of links, add this line of CSS to your stylesheet:
a.help {cursor: help; }
Then add the help class to whatever links you'd like to be affected, like so:
<a href="manual/" class="help">Manual</a>
| cursor: auto | the default cursor |
|---|---|
| cursor: crosshair | gun-style cross |
| cursor: default | no change |
| cursor: pointer | the normal hand pointer that appears when you hover over a link |
| cursor: hand | a value that is only supported in IE. Don’t use it, use pointer instead |
| cursor: wait | the hourglass (non-animated, sadly) |
| cursor: text | the text-selecting 'I-beam' thing |
| cursor: help | an arrow with a question-mark |
| cursor: move | crosshair with arrows on the ends |
| cursor: n-resize | an arrow pointing north |
| cursor: ne-resize | an arrow pointing north-east |
| cursor: nw-resize | an arrow pointing north-west |
| cursor: e-resize | an arrow pointing east |
| cursor: w-resize | an arrow pointing west |
| cursor: s-resize | an arrow pointing south |
| cursor: se-resize | an arrow pointing south-east |
| cursor: sw-resize | an arrow pointing south-west |
Please make sure you’re using these commands for a good reason. My favourite implementation is to put them in a navigation frame and have them pointing towards the frame their link will open in. You can use a help cursor for links to additional information and definitions. Or how about a special cursor for external links? Classy.
Designing Without Tables: Using CSS
I highly recommend this book for those wanting to learn how to write CSS, including using CSS for layout. SitePoint ships anywhere in the world and you can download the first 4 chapters for free. Read our review.
