Practical and Useful Information For Enhancing Your Site

CSS Cursors
Changing The Mouse Cursor

There are three ways to change the cursor on a Web page: plug-ins, CSS, or JavaScript. While a plug-in should provide the highest degree of cross-browser compatibhility, most people aren't going to download and install a plug-in. I think the best solution is to use CSS, but it won't work with NS 4.x and not all cursors work with NS 6+. Move your cursor over the following lines and see how it changes:

Place your cursor over this text: crosshair cursor.

Code: <FONT style="cursor: crosshair">Place your cursor over this text: crosshair cursor</FONT>

Place your cursor over this text: pointer cursor

Code: <FONT style="cursor: pointer; cursor: hand}">Place your cursor over this text: pointer cursor</FONT>

Note: In the above example, cursor:hand was added because IE5.x/Win does not recognize pointer. However, because hand is an invlaid value for cursor, use of the above code will prevent the stylesheet from validating.

Place your cursor over this text: text cursor

Code: <FONT style="cursor: text">Place your cursor over this text: text cursor</FONT>

Place your cursor over this text: hourglass cursor

Code: <FONT style="cursor: wait">Place your cursor over this text: hourglass cursor</FONT>

Place your cursor over this text: help cursor

Code: <FONT style="cursor: help">Place your cursor over this text: help cursor</FONT>