New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Fancy Cursor Script

Author: Dynamic Drive

Description: In IE 4+ and NS6+, the cursor shown when moving the mouse over elements can be customized to display a cursor type other than the pre-selected one by your OS. You can select from a pool of cursors to be associated with elements in a document when the mouse is over them. For example, wouldn't it be nice if you could replace the usual "hand" cursor with something else when moving the mouse over links, or give tables a "crosshair" cursor instead of the usual I-beam cursor? Well, thanks to IE 4/NS6's support for CSS, you can!

Demo:

This link has a "help" cursor
This table has a hand cursor!

buggy.gif (13743 bytes)
This image has a "wait" cursor


Directions: There are in general 7 types of cursors you can choose from to be associated with any (with the exception of a few) elements in a document. They are the "hand", "crosshair", "text", "wait", "move", "wait", and "resize" cursor. The below shows these cursors, in that order:

Point...

Click on the cursor you want to use, and the necessary CSS code for that cursor will be shown in the below box. Paste that code into the element you wish the cursor to be associated with:

Select All

For example:

<span style="cursor:pointer;cursor:hand">This span has a "hand" cursor</span>

Remember, most elements can have a custom cursor associated with it, so feel free to paste the code into your <table> elements, <p> elements, or even the <body> element itself!

Developer's note

You may be wondering why the "hand" style has two declarations within its tag. The reason is to please both NS6 and IE4+, the former of which recognizes "pointer", while the later, "hand".