Setting a cursor [with CSS] on an image map area

Question

Is there any way to set a cursor on an area element with CSS? It seems not. This code appears to do nothing at all.

CSS

area {cursor: help;}

HTML

<img src="blah.png" width="800" height="550" alt="Blah" usemap="#blah-map">
<map name="blah-map">
    <area shape="rect" coords="104,86,210,113" href="okgo.htm" alt="OK Go">
</map>

The best hack I have been able to come up with is to absolutely position a link on top of that area, and give it the cursor style.

Answer 1

I recently had an issue with a css cursor displaying in firefox correctly, but not in chrome or safari.

Long story short, I ended up needed to set display:block; on the area tag. Either my base css, or the browser defaults the tag to display:none;

This was the quick test case I created (check it out HERE)

<img usemap="#map" src="http://i.imgur.com/9EcEvkn.jpg" height="120" width="100" />
<map name="map" id="map">
<area shape="rect" coords="0,0,120,100" href="#" />
</map>

area {
    cursor: crosshair;
    display:block;
}

Hopefully this helps someone.