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 valuesValue | 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. |