Mouse hand cursor disappears in Google Chrome if page is reloaded

Using a normal

.foo {cursor:pointer;cursor:hand;width:250px;height:250px;background:#aaa;}

and

<div class="foo"><!--ph--></div>

as seen here: http://jsfiddle.ne开发者_StackOverflowt/UZq5d/2/

If I hold the cursor over the gray background then reload the pages, the cursor defaults back to the arrow.

Is there any nifty and lightweight way to check if the cursor is over the .foo element on load? Or perhaps periodically, on mouse move? jQuery allowed.

EDIT: I'm seeing this behaviour using Chrome on OS X.

Using jQuery to set the cursor initially works - ie without the css for cursor - see here to see what i mean --> http://jsfiddle.net/UZq5d/15/

Okay I just added the bounty and when I try it again it works in Chrome.

So, currently working in Google Chrome version 18.0.1025.168 m.

I'll close this question with this.

try

.foo {cursor:pointer !important;cursor:hand;width:250px;height:250px;background:#aaa;}

Its working in this version as well.. 14.0.835.186 m

but actually, its taking sometime (1 or 2 seconds) to retain the hand cursor from I cursor...