O'Reilly logo

CSS Cookbook, 3rd Edition 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

Changing Cursors

Problem

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

The cursor changing to a hand

Figure 7-6. The cursor changing to a hand

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 7-2. However, support for these values varies from browser to browser. Opera 7 and later and Internet Explorer for Windows 5.5 and later both support the cursor property. Although Firefox supports most values, the browser doesn’t support uri. Also, in Firefox, child elements do not inherit the cursor property from parent elements.

Table 7-2. Cursor property values

Value

Description

Sample

auto

Cursor changes to an image that is determined by the browser

image with no caption

crosshair

Cursor changes to two perpendicular lines intersecting in the middle; this is similar to an enlarged plus sign

image with no caption

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

image with no caption

pointer ...

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