Search code examples
htmlcssdictionaryarea

HTML map area tags are not showing pointer cursor when hovered


I'd need to make my area elements appear as pointer cursor to indicate that they are clickable. The flags on the map at the right, 'http://www.metlifecare.co.nz/bay-of-plenty-villages' should appear like they are links.

I'm pretty sure the method I've been using right now to show the <areas> as pointer cursors is working before. Somehow, now its not working anymore.

CSS I've been using:

area:hover, .hover {
    cursor: pointer;
    display: block;
}

Based on the example, http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap , the area elements are working as a link. However, the flags on the site I'm currently working are not. They should appear the same also.

Am I missing something or any suggestion for alternative to make it work correctly?


Solution

  • This problem is resolved after spending couple of hours looking on the web for a fix.

    All what I did was remove the cursor:default; applied to the ''. Voila! The cursor:pointer applied to map elements are now working.