Skip to main content

Forums

This topic contains 8 replies, has 0 voices, and was last updated by  ldj 7 years, 4 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #30220

    ldj
    Member

    I’m trying to apply a little animation to my navigation on my site using the following CSS:

    nav a:hover:nth-child(odd)
    {
    -webkit-transform: rotate(-10deg) scale(2.5);
    -moz-transform: rotate(-10deg) scale(2.5);
    -o-transform: rotate(-10deg) scale(2.5);
    }
    nav a:hover:nth-child(even)
    {
    -webkit-transform: rotate(5deg) scale(2.2);
    -moz-transform: rotate(5deg) scale(2.2);
    -o-transform: rotate(5deg) scale(2.2);
    }

    This is working fine in Opera and Firefox, but in the latest version of Chrome, hovering over the links does nothing. Is there any special syntax or additional code required for Webkit? Looking aroudn the web I can’t see anything wrong.

    Thanks

    #79987

    virtual
    Participant

    You mention Opera and Firefox which are targeted respectively by -o and -moz . Have you tried Safari, -webkit targets Safari and Chrome. Are you using position fixed, as there is a problem when using both together.

    #79964

    Chris Coyier
    Keymaster

    I wonder if you gotta list the :nth-child first

    nav a:nth-child(even):hover

    Shoudn’t matter but this way feels more correct to me

    #79921

    ldj
    Member

    @chriscoyier: Agreed. Reads better thats for sure. Makes no difference to the functionality/behaviour though.

    @virtual: tried it in Safari – same thing, not working at all :(

    #79927

    ldj
    Member

    I’ve set the position:relative explicitly which has also made no difference. Also added ‘background-color: blue;’ to the CSS which is happening in Chrome, so I know the hover event is firing in Chrome, making it even stranger!

    #79905

    shagzdesign
    Member

    can you post a link to the live code that way someone might see something you missed?

    #79838

    Chris Coyier
    Keymaster

    Or a quick reduced test case in http://jsbin.com would be good.

    #79194

    ldj
    Member

    Just thought I’d update this. I solved it by adding display:block to nav:a elements. Seems Webkit won’t transform them otherwise.

    Live & learn I guess!!! :(

    #89920

    gildean
    Member

    Just to give more info on people stumbling on to this thread:

    Use display: inline-block for the transform: scale to work on chrome, firefox and opera and not to break the styling.
    With inline-block you can use scale straight on text-links and have them work nicely with all modern browsers except IE.
    A small example on one of my linux-project pages here: http://julkinen.salaliitto.com/ac100

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star