Giving 'cursor' a Hand

  • Revision slug: Giving_'cursor'_a_Hand
  • Revision title: Giving 'cursor' a Hand
  • Revision id: 132296
  • Created:
  • Creator: Liam Morland
  • Is current revision? No
  • Comment 22 words added

Revision Content

A good number of developers have asked when Mozilla and Netscape 6+ plan to implement support for the {{ cssxref("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.

If you are not supporting IE prior to IE6, use cursor: pointer;. It will work and is valid.

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.

Original Document Information

  • Author(s): Eric A. Meyer, Netscape Communications
  • Last Updated Date: Published 04 Mar 2002; Revised 30 Jan 2003
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.

{{ languages( { "pl": "pl/Podaj_D\u0142o\u0144_\'kursorowi\'" } ) }}

Revision Source

<p>A good number of developers have asked when Mozilla and Netscape 6+ plan to implement support for the {{ cssxref("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.</p>
<p>The basic problem is this: Internet Explorer 5.x for Windows recognizes the value <code>hand</code>, which appears nowhere in <a class="external" href="http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor">section 18.1 of CSS2</a>– nor anywhere else in the specification, for that matter. The value which most closely corresponds to the behavior of <code>hand</code> is <code>pointer</code>, 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.</p>
<p>Unfortunately, IE5.x/Win doesn't recognize the value <code>pointer</code> as meaning anything at all. IE6/Win and IE5.x/Mac do both recognize <code>pointer</code> as well as <code>hand</code>, fortunately. Meanwhile, Mozilla and Netscape 6+ follow the CSS2 specification and handle <code>pointer</code>, but ignore the proprietary value <code>hand</code>.</p>
<p>So if Mozilla/Netscape ignores <code>hand</code> and IE5.x/Win ignores <code>pointer</code>, what's an author to do? Ask for both in the proper manner, and you shall be rewarded.</p>
<pre>a {cursor: pointer; cursor: hand;}</pre>
<p>Do <strong>not</strong> 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 <code>pointer</code>. In IE5.x/Win, it sees both and uses the second, so you get <code>hand</code>. 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.</p>
<p>With this simple approach, you can make sure your designs get a hand every time.</p>
<p><strong>A caveat:</strong> following the approach recommended here will prevent the stylesheet from validating, since it contains an invalid value for <code>cursor</code>. Authors are advised to weigh this drawback against the gain the fix gives them, decide which is more important to them, and proceed accordingly.</p>
<p>If you are not supporting IE prior to IE6, use <code>cursor: pointer;</code>. It will work and is valid.</p>
<h3 id="Checking_Support">Checking Support</h3>
<p>Wondering what your browser does with <code>hand</code> and <code>pointer</code>? Find out with the handy test table shown here!</p>
<table class="standard-table"> <tbody> <tr> <td style="cursor: pointer;">This table cell has the style <code>cursor: pointer</code>. 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.</td> <td>This table cell does not have a <code>cursor</code> style and so the cursor should be rendered according to its default(s).</td> <td style="">This table cell has the style <code>cursor: hand</code>. It should cause the cursor to change to a little pointing hand in IE5+/Win, but not Mozilla and Netscape 6.</td> </tr> </tbody>
</table>
<h3 id="Related_Links">Related Links</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor">CSS2, section 18.1</a></li> <li><a class="external" href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">cursor Property (MSDN)</a></li>
</ul>
<div class="originaldocinfo">
<h3 id="Original_Document_Information">Original Document Information</h3>
<ul> <li>Author(s): Eric A. Meyer, Netscape Communications</li> <li>Last Updated Date: Published 04 Mar 2002; Revised 30 Jan 2003</li> <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> <li>Note: This reprinted article was originally part of the DevEdge site.</li>
</ul>
</div>
<p>{{ languages( { "pl": "pl/Podaj_D\u0142o\u0144_\'kursorowi\'" } ) }}</p>
Revert to this revision