Recipe 6.5. Changing Cursors

Problem

You want to change the cursor to an icon representation of a timepiece when the mouse pointer rolls over a link, as in Figure 6-4.

Figure 6-4. The cursor changes to a timepiece

Solution

Use the cursor property to change the cursor:

a:link, a:visited {  cursor: move;   }

Discussion

The cursor property can take multiple values, as listed in Table 6-2. However, support for these values varies from browser to browser. Opera 7 and Internet Explorer for Windows 5.5+ support the cursor property. Although Netscape Navigator 6+ supports most values, the browser doesn't support the uri. Also, in Navigator, the cursor property isn't inherited to child elements from the parent.

Table 6-2. Cursor property values

Value	Description	Sample
auto	The cursor changes to an image that is determined by the browser.
crosshair	Two perpendicular lines intersecting in the middle; this is similar to an enlarged plus sign.
default	Platform-dependent cursor that in most browsers is rendered as an arrow. Browser vendors or computer operating systems may dictate a different cursor style.
pointer	Used to illustrate that the mouse pointer is over a link; sometimes rendered as a hand with an extended index finger. Browser vendors or computer operating systems may dictate a different cursor style.
move	Illustrates that an element can be moved; sometimes rendered as a crosshair with arrowheads on the tips or a five-fingered hand.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize	An arrow illustrating the direction in which a side can be moved; for example, se-resize indicates a southeast direction.
text	Illustrates that text can be selected; sometimes rendered like an I-beam commonly used in word processing programs.
wait	Illustrates that the computer is busy; sometimes rendered as an hourglass.
progress	Illustrates that the computer is busy, but the user still can interact with the browser.
help	Illustrates that information or help is available, often at the destination of the link; sometimes rendered as a question mark or an arrow with a question mark.
<uri>	The cursor can be swapped with an externally defined cursor like an image, Windows cursor file, SVG cursor, etc.	N/A

The code to include a custom cursor is similar to that used to set a background image on an element:

a.help:link, a.help:visited{  cursor: url(bewildered.gif); }

While employing different cursors, most users will find changes to their routine surfing habits somewhere between a whimsical annoyance and an extreme aggravation, depending on how excessive your implementation is. Therefore, change the cursor a user is accustomed to seeing at your own risk.

See Also

The CSS 2.1 specification for the cursor property at http://www.w3.org/TR/CSS21/ui.html#propdef-cursor; and examples of the various cursors in action at http://www.zimmertech.com/tutorials/css/20/changing-cursors-tutorial.php.