I'm attempting to get rid of the outdated image map code on my homepage and use CSS3 border-radius circles / or jquery. This works nicely on Firefox but on Safari and Chrome (haven't tested with IE yet) it doesn't quite work right. As you begin to mouse over a CSS3 circle, if coming in from a 'corner' the hover state fires as if were still a square. I only want the hover state to fire when the mouse is actually over the circle. Firefox does this beautifully but the others don't.

Does anyone have any suggestions?

The code from codrops solved the hover circle problem on webkit browsers but I can't get it to work on the overlapping circles. Any ideas? Thank you.

Below is a dotted bounding box of the border-radius circle. The hover state should only fire within the circle.

Any ideas?