3.4. Changing Cursors

Problem

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

The wait cursor represented by a watch icon

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.

Cursor property values and their descriptions

crosshair

Two perpendicular lines intersecting in the middle; this is similar to an enlarged plus sign.

Cursor property values and their descriptions

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.

Cursor property values and their descriptions

Get CSS Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.