I n IE 4+, NS6+ and Opera7.23 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 ( Operating System ). 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 IE4, Netscape6 and Opera7.23's support for CSS, you can!
W e have tested the tags in IE6.0, Firefox1.5.0.1, Opera8.52, Netscape7.02, Netscape8.0.4 and AOL Explorer1.2. These <span style> </span> tags worked well in all platforms with no variations observed.
Directions:
There are in general 25 or so types of cursors you can choose from to be associated with any (with the exception of a few) elements in a document.
|
Place your cursor on the below text to see your cursor change!
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".  <span style="cursor:default"> This span has a "default" cursor </span>  <span style="cursor:crosshair"> This span has a "crosshair" cursor </span>  <span style="cursor:text"> This span has a "text" cursor </span>  <span style="cursor:wait"> This span has a "wait" cursor </span>  <span style="cursor:text"> This span has a "help" cursor </span>  <span style="cursor:move"> This span has a "move" cursor </span>  <span style="cursor:e-resize"> This span has a "e-resize" cursor </span>  <span style="cursor:ne-resize"> This span has a "ne-resize" cursor </span>  <span style="cursor:nw-resize"> This span has a "nw-resize" cursor </span>  <span style="cursor:n-resize"> This span has a "n-resize" cursor </span>  <span style="cursor:se-resize"> This span has a "se-resize" cursor </span>  <span style="cursor:sw-resize"> This span has a "sw-resize" cursor </span>  <span style="cursor:s-resize"> This span has a "s-resize" cursor </span>  <span style="cursor:w-resize"> This span has a "w-resize" cursor </span>  <span style="cursor:progress"> This span has a "progress" cursor </span>  <span style="cursor:all-scroll"> This span has a "all-scroll" cursor </span>  <span style="cursor:col-resize"> This span has a "col-resize" cursor </span>  <span style="cursor:no-drop"> This span has a "no-drop" cursor </span>  <span style="cursor:not-allowed"> This span has a "not-allowed" cursor </span>  <span style="cursor:row-resize"> This span has a "row-resize" 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!
W
e hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Rate This Page ]
