[Home]Css cursor

HomePage | RecentChanges | Preferences | Newbie Help

Ah the cursor! Some like the clicky-hand, others the crosshair. Whichever you prefer, CSS version 2.0 is here to help. Internet Explorer 4+ now supports over 17 different cursors, and Netscape probably won't be far behind, although NN4.7 doesn't support any! Here you will find a list of the available cursors and how to use them in your pages.


What cursors are available?

How do I use them in my page?

Using CSS. Either inline, externally or in the HEAD of your document. They can be used on almost all block elements such as images and you can use them on inline elements also by making them block level. The cursor effect can be added to individual items or all the items on the page depending on how you set-up your stylesheet.

Links

This is very easy to use, especially if you already have a stylesheet to determine the color and behaviour of your links. Have a look at the [Hover Effect] page for more information. You need to add one line to your stylesheet.
a:hover { cursor: foobar; }
Replace the word 'foobar' with your chosen cursor (see above) and the mouse pointer will change when you hover over the link.

Text

To change the cursor when hovering over text you must first make the text a block element by including it in a DIV or P tag. You can then apply the style to that element. For example..
<p style="cursor: foobar;">Affected text here</p>
This example shows how to use the stylesheet inline rather than in the HEAD of the document, but placing the style in the HEAD will have the same effect..

Images

The stylesheet can be added right into the IMG tag.
<img src="picture.gif" alt="picture" style="cursor: foobar;">

So there you go. The basics of changing the users cursor in IE4+. Experiment with these methods and you will be able to get the effect you want. Good luck! and use them wisely! Bodidily


HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited February 4, 2003 5:53 pm (diff)
Search:

This FAQ is happily hosted by Betadome Digital Media