CSS2 cursor not displaying "hand"

Question

I'm following the standard of W3C here http://www.w3.org/TR/CSS2/ui.html and here http://www.quirksmode.org/css/cursor.html#note. However, the element isn't displayed the hand when mouseover. Please help.

<a style="cursor:pointer;cursor:hand" onclick='javascript:window.open("http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php single_post_title(); ?>", "_blank", "toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=no,resizable=no,copyhistory=no,left=300,top=100,width=626,height=436")'>[image goes here]</a>

When viewing with IE9 and mouseover, it doesn't change the cursor into the "hand", but it's just the regular arrow instead. Please advise.

Thanks!

Solution 1

It should be cursor: pointer; alone because hand is a proprietary value only implemented by old versions of IE, and is thus an invalid value.

If you actually care about IE 5.x, though, you switch the two properties around, i.e. (cursor: hand; cursor: pointer, hand comes first). Your CSS will still invalidate though, so I'd rather you not bother.

Solution 2

hand is not a valid value for cursor -- it is IE8- legacy. Use pointer.

http://www.w3schools.com/css/pr_class_cursor.asp

Solution 3

in your supplied link:

Value:      [ [<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 ] ] | inherit

hand is not valid css

in the other link hand is mentioned however it is only supported in ie, excluding ie9 beta, and in opera.

if you are looking for the hand with the pointing indexfinger you want pointer to be the last one mentioned in the css

Solution 4

Try leaving out "cursor:hand;". According to the article you refer to, it is only needed for Internet Explorer 5. Unless you are developing a internal web app for a company who still work with that browser, I'd leave it out.

View more solutions