O'Reilly logo

Beginning CSS: Cascading Style Sheets for Web Design, Second Edition by Richard York

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

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 ...

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