Using Cursor Hand or Cursor Pointer?

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, if for whatever reason, you coded it like the following ...

View Live Code

Then you need the "cursor: pointer" rule to have the clickable mouse icon show up.

In CSS, the following rule is used to display an clickable cursor icon:

cursor: pointer;

However, you sometimes will see code that uses ...

cursor: hand;

So should one use "pointer" or "hand"?

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. Also, Firefox and Safari does not support the "hand" value and requires "pointer". The "hand" value is only needed by Internet Explorer 5.5 and below. You can see which browser support which values in this table at Quirksmode.

With Internet Explorer 7.0 out at the time of this writing, Internet Explorer 5.5 is somewhat obsolete. Hence, I would just use "cursor: pointer".

However, if you want to support lower Internet Explorer browsers, put both property values with the "pointer" listed last...

cursor: hand;
cursor: pointer;

But note that having "cursor: hand" in your CSS will fail W3C validation when you put your URL into W3C validator.

Using Cursor Hand or Cursor Pointer?

More Tutorials