Giving 'cursor' a Hand
A good number of developers have asked when Mozilla and
Netscape 6+ plan to implement support for the
cursor property. They're often surprised to discover
that both browsers already do. However, what should come as no
surprise is that the support is based on the approved W3C
specification for CSS2, as opposed to adding portions at
will.
The basic problem is this: Internet Explorer 5.x for Windows
recognizes the value hand, which appears nowhere
in section
18.1 of CSS2-- nor anywhere else in the specification, for
that matter. The value which most closely corresponds to the
behavior of hand is pointer, which
the specification defines as: "The cursor is a pointer that
indicates a link." Note that doesn't say anything about a hand
appearing, but going by browser conventions to date, the
practical effect is the same.
Unfortunately, IE5.x/Win doesn't recognize the value
pointer as meaning anything at all. IE6/Win and
IE5.x/Mac do both recognize pointer as well as
hand, fortunately. Meanwhile, Mozilla and Netscape
6+ follow the CSS2 specification and handle
pointer, but ignore the proprietary value
hand.
So if Mozilla/Netscape ignores hand and
IE5.x/Win ignores pointer, what's an author to do?
Ask for both in the proper manner, and you shall be
rewarded.
a {cursor: pointer; cursor: hand;}
Do not reverse those two values! If you
write your styles as shown above, then NS6+ will see the first
value and ignore the second, so you get pointer.
In IE5.x/Win, it sees both and uses the second, so you get
hand. If you reverse the values, then Netscape 6+ will
be okay, but IE5.x/Win will see both and try to use the second.
That won't get you the little hand-pointer icon in
IE5.x/Win.
With this simple approach, you can make sure your designs get a hand every time.
A caveat: following the approach recommended here will prevent the stylesheet from validating, since it contains an invalid value for cursor. Authors are advised to weigh this drawback against the gain the fix gives them, decide which is more important to them, and proceed accordingly.
Checking Support
Wondering what your browser does with hand and
pointer? Find out with the handy test table shown
here!
This table cell has the style
cursor: pointer. It should cause the cursor to
change to a little pointing hand in Mozilla and Netscape
6+, IE6/Win, and IE5.x/Mac, but not IE5.x/Win. |
This table cell does not have a cursor
style and so the cursor should be rendered according to its
default(s). |
This table cell has the style
cursor: hand. It should cause the cursor to
change to a little pointing hand in IE5+/Win, but not
Mozilla and Netscape 6. |
