The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css3 border-radius circle hover problems – HELP

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #38956

    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:
    and current homepage using image maps:

    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.


    @kgscott284 Thanks for taking a look. I added a dotted line around a border-radius circle to show you what I mean. While the hover state still works I do not want it to fire when over the “square”.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.