Currently my website uses an image map to get around the hover state issues caused by using a circle hover state.
However, I’m attempting to get rid of the outdated image map code 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?
Here’s my testing site for CSS3 circles and some code from codrops: http://www.stevenheld.com/HoverClickTriggerCircle/index.html
and current homepage using image maps: http://www.StevenHeld.com
The code from codrops solved the hover circle problem on webkit browsers but I can’t get it to work on overlapping circles. Any ideas? Thank you.
