Recipe 3.4 Changing Cursors

Problem

You want to change the cursor when the mouse pointer rolls over a link, as in Figure 3-3.

Figure 3-3. The wait cursor represented by a watch icon

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 3-2. However, support for these values varies from browser to browser. Opera 7 and Internet Explorer for Windows 5.5+ support the cursor property. While 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 3-2. Cursor property values and their descriptions

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 edited; 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 between a whimsical annoyance and an extreme aggravation, depending on how excessive your implementation is. (This reaction can be noted as being similar to the use of the blink property in Recipe 3.7.) 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.