Cursor styles

  • Not supported by Netscape 4, Opera, Safari, iCab and Omniweb.
  •  

    By changing the value of the cursor declaration you can assign cursor styles to various HTML elements. Although in theory this is great functionality, I've seen almost no practical examples that actually use cursor for something useful.

    When defining cursor styles, please remember that the users of your websites are used to the cursor having a certain style when going over links, text or window borders. Don't change this on a whim, your users may get totally confused.

    Values

    cursor: crosshair. No problems.

     

    cursor: auto. Now this one seems to have serious problems. Theoretically it means: "give the cursor the style it should normally have".

    This test paragraph once again has cursor: crosshair while
    this link has cursor: auto and
    this link has no cursor style specified and
    this link has cursor: default.

    As far as I understand it the first link should get its automatic style (hand/pointer) while the second one should inherit its crosshair style from the paragraph.
    But this actually happens only on Explorer 5 on Mac. Explorer on Windows gives both links a hand/pointer, while Mozilla 1.0 gives the first link a text cursor (why???) and the second one a hand.
    Opera 7 interprets cursor: auto as: keep the cursor the same as it was. When you enter the upper link from above you get a crosshair, when you enter it from below you get a hand.
    As to the third link, all browsers show an arrow.

     

    cursor: default. Gives the default cursor of the browser (an arrow).

     

    cursor: pointer. This is the W3C approved way to change the cursor to a hand. Microsoft at first disagreed, which is why Explorer 4-5.5 on Windows don't support this style. Only Explorer 6 has added W3C support. Explorer on Mac does support pointer.

     

    cursor: hand. This is the Microsoft value to make the cursor a hand.

     

    The only true cross-browser syntax for a hand is:

    p.pointerhand {
    	cursor: pointer;
    	cursor: hand;
    }
    

    Note that the two declarations must be in this order.

     

    cursor: move. No problems.

     

    cursor: text. No problems.

     

    cursor: wait. No problems, but please remember that while on Windows this looks like an hourglass, on Mac it looks like a watch. So don't try to describe how the cursor should look (unless you're willing to add an OS detect, too).

     

    cursor: help. No problems.

     

    cursor: progress. This is a new Microsoft extension. There are plenty more, see MSDN for a complete list.

     

    cursor: url(image.gif). Doesn't work. Explorer 6 requires a .ani or .cur file, but I don't know how to create them. I don't know what the other browsers expect.

    contents