treehouse : what would you like to learn today?
Web Design Web Development iOS Development

CSS3 border-radius circle hover problem -webkit browsers

  • Hi all,
    I'm having an issue with -webkit browsers (Safari, Chrome) when I use a hover state for a border-radius circle. The hover state still fires as if the element were still a 'square'. In other browsers the hover state fires only when the mouse cursor is over the circle. Any ideas on how to solve this issue?

    Here's my testing site for CSS3 circles: http://www.stevenheld.com/HoverClickTriggerCircle/index.html
    My current homepage uses image maps to get around this issue, but I'd like to use an updated code: http://www.StevenHeld.com

    Thanks for looking and for any advice/help you can offer!
  • Not something you can do with CSS...multiple stacked/positioned image/divs with the JQuery solution suggests itself to me...but that is beyond my expertise.
  • That is just current browser implementation, not much you can do about it!