Using Cursor Hand or Cursor Pointer?

Posted in Articles

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…

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 …

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;

 

---