Why `cursor: pointer` does not work in IE6 ?

Question

In FF3 I see a hand when the mouse is over the element, but in IE6 I don't. Why ? Is there any workaround ?

Example

Answer 1

IE6 doesn't support ":hover" selectors on anything else than <a> elements

Answer 2

As Philippe mentioned, IE6 only supports :hover on <a> elements. You asked for a workaround, the only workarounds require javascript to be enabled:

• whatever:hover
• ie7.js

Answer 3

Sometimes cursor: hand will work. Best to specify both, for standards-compliant browsers using:

cursor: pointer, hand;

What you can also do is copy the cursor from a Windows installation and point to it using a URL:

cursor: url(pointer.cur);

Or, even better yet, have it as a backup and insert it using IE's wacky support for conditional comments:

<!-- normal CSS -->
<style type="text/css">
.clickable {
    cursor: pointer;
}
</style>

<!--[if IE 6]>
<style type="text/css">
.clickable {
    cursor: url(pointer.cur);
}
</style>
<![endif]-->

Answer 4

You can simply set foo { cursor: pointer; } (without :hover), or (better) use an a element as you almost certainly should anyways.

Answer 5

I would simply use Javascript if it's anything other than an tag. If you're using jQuery, you could do something like this:

$('#element').hover( function() {
   $(this).css('cursor', 'pointer');  
}, function() {
   $(this).css('cursor', 'inherit');
});