Cascading Style Sheets: The Definitive Guide, Second Edition

Cursors

Another important part of the user interface is the cursor (referred to in the CSS specification as the “pointing device”), which is controlled by a device such as a mouse, trackpad, graphic tablet, or even an optical-reading system. The cursor is useful for providing interaction feedback in most web browsers; an obvious example is that the cursor changes to a small hand with an extended index finger whenever it crosses over a hyperlink.

Changing the Cursor

CSS2 lets you change the cursor icon, which means that it’s much easier to create web-based applications that function in a manner similar to desktop applications in the operating system. For example, a link to help files might cause the cursor to turn into a “help” icon such as a question mark, as shown in Figure 13-2.

Figure 13-2. Changing the cursor’s icon

This is accomplished with the property cursor.

cursor

Values

[[<uri>,]* [ auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit

Initial value

auto

Applies to

all elements

Inherited

yes

Computed value

for <uri> values, an absolute value; otherwise, as specified

The default value, auto, simply means that the user agent should determine the cursor icon most appropriate for the current context. This is not the same as default, which forces the icon to be ...