Using Cursor Hand or Cursor Pointer?

Posted in Articles

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

The truth is that most often you need neither …

cursor: hand;

nor

cursor: pointer;

Most of the time, your browser will change the cursor to be a clickable icon when you hover over a link. For example, the following code will give you a proper cursor without any CSS rules…

hand cursor example code

hand cursor example code

View live code

And this is the standard perferred way of constructing a clickable image.

However, sometimes you do not have an <a> tag link bounding your image.   You just have an image which uses Javascript to implement a click as in …

hand cursor code 2

hand cursor code 2

View live code.

Then the browser will not know to change the cursor to a hand icon when mouse is over the image unless you add the CSS rule

cursor: pointer;

on your image as shown above.

All “modern” browsers will support “pointer” and that is the W3C standard.  As you can see from the W3C specs, “hand” is not a valid valid for the “cursor” property.

But you sometimes might see old code that uses …

cursor: hand;

That is because the “hand” value is only needed by Internet Explorer 5.5 and below. But hardly anyone uses Internet Explorer 5.5 anymore.  So use…

cursor: pointer;

And not worry about…

cursor: hand;