Create New Topic

CSS3 Circles on Hover

Home Forums Web + Tech Answers CSS3 Circles on Hover

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #3034

    steven
    Participant

    Currently my website uses an image map to get around the hover state for a circle.

    I’m attempting to re-create my website without an image map and use CSS3 circles. 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 like it were a square. I only want the hover state to fire when the mouse is actually over the circle. Firefox does this but the others don’t.

    Does anyone have any suggestions?

    Here’s my testing site for CSS3 circles: http://www.StevenHeld.com/test

    and current site using image maps: http://www.StevenHeld.com

    #3096

    Bryan Hadaway
    Keymaster

    Hi steven,

    Before we go further I actually have a pretty extensive article I’ve written on CSS circles here:

    https://bryanhadaway.com/how-to-create-circles-with-css/

    You might want to check that out and try updating your code. IE is notoriously an all around bad browser. Very slow to keep up with other browsers especially with CSS3 support.

    So officially, CSS circles do not work in IE. Another reader shared a possible workaround for IE here:

    http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

    Thanks, Bryan

    #3097

    steven
    Participant

    I did read your article -that’s how I thought you’d be a good one to ask. But it looks like your circles do the same ‘square’ state on hover. I was just wondering if I could solve that since my design doesn’t suite a ‘square’ hover state very well.

    I added a testing circle surrounded by a dotted line to emphasize my issue, here – http://www.StevenHeld.com/test

    #3098

    Bryan Hadaway
    Keymaster

    Hi steven,

    My code should work fine in all the latest versions of standards-compliant browsers.

    What exact browser version are you having the problem with and on what operating system?

    Thanks, Bryan

    #3099

    steven
    Participant

    Mac OSx 10.6.8

    Firefox: 6.0 (works great)

    Safari: 5.1.1 (square hover state)

    Chrome: 15.0.874.120 (square hover state)

    Thanks for your help. I’m a designer and not much of a developer. Although, I know more than most designers.

    #3100

    Bryan Hadaway
    Keymaster

    Hi steven,

    I’ve tested my code and it actually works in the latest versions of all the major browsers including IE (at least for Windows).

    Try updating to the latest browser versions and check again. Latest stable versions as of Nov 10, 2011:

    Firefox 8

    Chrome 15

    Safari 5

    Internet Explorer 9

    Now just to double check, you’ve visited https://bryanhadaway.com/how-to-create-circles-with-css/ recently (I have made some updates to the code) and this is where the hover state is square or do you mean on your own site this is occurring?

    If the latter, can I get a link?

    I don’t see why just because you’re on Mac it would be all that different?

    I’ll be happy to keep at it until we get it resolved so don’t give up.

    Thanks, Bryan

    #3101

    Bryan Hadaway
    Keymaster

    UPDATE: Okay, I checked out http://www.stevenheld.com/test/ and I see it isn’t fully working like my examples in my article.

    You’re absolutely welcome to copy the code I’ve shared and use it/update it for your use.

    Thanks, Bryan

    #3102

    steven
    Participant

    I will certainly pull out my code and try yours. I’m sure the current code on my site has a lot of unnecessary elements from when I was trying to get the hover state to work.

    I’ll let you know how that goes. I’m at work now so it’ll be later tonight.

    Thanks for looking into this. You rock.

    #3103

    steven
    Participant

    After testing out your code, I still get the same problem on Safari and Chrome on the Mac and even on the PC. You said you were able to get Safari and Chrome to behave correctly on your end with hover states over circles but I couldn’t reproduce that. I checked to make sure the browsers were up to date.

    It seems to be an issue with only those browsers. I’m glad to see that the latest IE actually behaves correctly but I was really hoping to have Safari behave correctly. Since, many other designers in my field are using macs and that browser.

    At this time, I think I’ll just wait to update my code and continue to use an image map until css3 border radius has consistent results in all major browsers.

    Unless you have any other ideas I could try?

    Thanks,

    Steven

    #3104

    Bryan Hadaway
    Keymaster

    Hi steven,

    To be clear, testing the code on your own site is where you’re having hover state issues? Have you viewed my article in all browsers? If you haven’t please do so.

    Perhaps there is conflicting code on your site causing havoc? Do you check your code for errors?

    HTML Validator: http://validator.w3.org/

    CSS Validator: http://jigsaw.w3.org/css-validator/

    Also, if you don’t use Firebug, I highly recommend it:

    http://tidythemes.com/want-to-learn-css/

    (or perhaps you’re already using the native Safari code inspector)

    I’m definitely willing to spend as much time on this as long as you’re willing cause this is a head scratcher and I definitely want to get to the bottom of it.

    Thanks, Bryan

    #3105

    steven
    Participant

    Thanks for wanting to look into this further.

    I get the problem on your site as well as mine using Safari or Chrome.

    Problem: The hover state fires when the mouse is over the ‘square’ of where the css3 circle would be if border radius wasn’t applied to create the circle.

    On firefox and IE9 the hover state fires when the mouse is over the circle area only. This is the behavior I am looking for. BUT on Safari and Chrome, the hover state fires within the ‘square’

    This problem can be seen more clearly when the css3 circle is much larger. Try 400px or more.

    I’ve created a css3 large circle with hover state on a testing page here: http://www.StevenHeld.com/test It uses your code.

    #3106

    Bryan Hadaway
    Keymaster

    Hi steven,

    Thank you for clarifying. So, on hover state the circles don’t actually become squares, that square area just activates the hover state. Okay, I understand now. I was stuck on that it made it visually a square because that’s what your code was doing in an original test I did.

    Okay, phew! Haha, I thought I was going crazy. Unless, you’re doing something really creative or precise where your circles are really close or overlapping or something like that I think it’s absolutely negligible and you should use it over bloated JS hotspots.

    Thanks, Bryan

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.