Using Basic Selectors - Beginning CSS3 - page 29

When styling links, there's a danger of removing visual clues that text is clickable. Most users no longer
expect blue underlines on links, but choose styles carefully to make links stand out from other text.

Changing the Look of the Cursor
When you mouse over a link, the browser automatically changes the shape of the cursor from an arrow to a hand.
Over ordinary text, the cursor changes to an I-beam, indicating that the text is selectable.
Sometimes, it's convenient to take control over what the cursor looks like. For example, the dotted underline
that many browsers display under <abbr> elements is meant to be a visual clue that the meaning of the
abbreviation will be displayed as a tooltip if you hover over it. But the visual clue would be much stronger if you
changed the cursor to indicate that help is at hand.
To change the look of the cursor, you use the CSS cursor property, which accepts any of the keywords listed
in Table 2-2 . The examples in the table show how Opera displays cursors in Windows 7. You can test what the
cursors look like in different browsers and operating systems by using cursors.html in the ch02 folder.

Table 2-2. Values Accepted by the cursor Property
Keyword Example Description

General Purpose Cursors
auto

Browser selects cursor based on current context.

default Default cursor—usually an arrow.

none Cursor is hidden.

Links and Status Cursors

context-menu Context menu is available for the current object.

help Help is available.

pointer Indicates a link.

progress Indicates something is happening, but that

user can still interact with the browser.

wait Indicates the browser is busy and the user

should wait.

Selection Cursors
cell

Indicates a cell or set of cells may be selected.

crosshair Displays two thin intersecting lines.

text

Indicates text can be selected.

vertical-text

Indicates vertical text can be selected.

( continued )