O'Reilly logo

CSS Cookbook by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required