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