HTML and CSS Reference
In-Depth Information
Compatibility
CSS 2, 3
IE 8+
Firefox 1.5+
Opera 7+, Safari 3+
cursor
This property determines how the cursor displays when passed over the affected element.
Syntax
cursor: url(
address of cursor file
) | 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 |
inherit
The default value,
auto
, leaves the cursor display to be determined by the user agent, so the
cursor will display according to either the browser defaults or the user system settings. The
common renderings of the values listed in CSS 2.1 are shown in Table 5-7.
The value
url()
can be used to reference a cursor source; multiple cursor sources
should be listed. As with fonts, the user agent should attempt to render the first cursor
listed, try the second one if necessary, and ultimately default to the generic cursor value
listed last, which should be listed though it is likely to default to
auto
appropriately in
conformant browsers:
<p style="cursor: url(greenarrow.cur), url(greenarrow.png), auto">
Custom
</p>
Note that the file type of the cursor linked to will depend on what the browser may support,
and some browsers, such as Internet Explorer, may allow for animated cursors.
CSS3 adds a number of new cursor values, including the ability to turn the cursor off
completely. While it is unclear the extent of new cursors that CSS3 will introduce, given its
raw state, many have been implemented already in modern browsers. Table 5-8 overviews
these and provides renderings where possible.
For more information on emerging CSS3 cursors, see www.w3.org/TR/css3-ui/#cursor.
Examples
.help {cursor: help;}
p.clickable {cursor: hand;} /* non-standard */
a:longload {cursor: wait;}
p {cursor: url("mything.cur"), url("second.cur"), text; }
Compatibility
CSS 2, 3 IE 5+, (IE 6+ for custom) Firefox 1+ (1.5 for custom) Opera 7+, Safari 1+
Note
• While custom cursors may not be supported in all browsers, particularly when they
are animated, various JavaScript tricks are often employed to imitate this property.
