Chapter 15. The Cursor Property

CSS provides the cursor property to control the type of cursor displayed for a particular element. The following table outlines the cursor property and its possible values.

Property

Value

Cursor

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

Initial value: auto

 

Non-standard extensions to cursor

hand | all-scroll | col-resize | row-resize | no-drop | not-allowed | vertical-text

Safari does not support custom cursors, or non-standard cursor keywords. Opera for the Mac does not support *-resize keywords, or non-standard cursor keywords. Opera for Windows supports *-resize keywords, but not non-standard keywords. Firefox for the Mac does not support the all-scroll keyword, but Firefox for Windows does. IE 6 and IE 7 support all possible options.

The notation in the preceding table shows that the cursor property can accept a reference to a custom cursor with the <uri> notation. The table also shows that you can provide more than one URL by giving a comma-separated list of URLs. Alternatively, you can provide a keyword to change the cursor displayed while the user's mouse pointer is hovering over an element. To demonstrate how the cursor can be changed using a keyword, consider the example in Figure 15-1.

Figure 15-1a

Figure 15-1a. Figure 15-1a ...

Get Beginning CSS: Cascading Style Sheets for Web Design, Second Edition 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.