Skip to main content

Forums

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #251884
    danbrooks1108
    Participant

    In my menu I want each link to change to a different color on hover. One I want to change to green, one to blue, and one to red. I tried it one way and got them to change colors like I wanted, but it wouldn’t stay inline, and I tried it another way and they stayed inline but wouldn’t change colors. I’m sure I’m just missing some stupid thing, but I can’t figure it out.
    Any suggestions?
    Thank you.

    .i-love {css-tricks: alot;
    }

    #251889
    Beverleyh
    Participant

    I want each link to change to a different color on hover

    You could give them all their own class and target them individually. Or use the nth-child selector https://css-tricks.com/almanac/selectors/n/nth-child/

    But you say there seems to be an underlying problem with links moving from inline to something else?

    I’m sure I’m just missing some stupid thing, but I can’t figure it out.

    Unfortunately, we can’t troubleshoot something we can’t see. We can help more if you post what you have in a basic CodePen demo. Show us what you’re doing either way to change the hover colour and we should be able to offer suggestions, based on your own code, as to why the inline shift is happening.

    #251909
    danbrooks1108
    Participant

    Well it’s kind of a mess but I got it to work.

    [Mod edit – Codedump removed]

    Sorry about that. I’m new and I forgot all about using the codepen.

    #251910
    Paulie_D
    Moderator

    Please…use Codepen.io to make a demo as requested

    Codedumps aren’t appreciated.

    #251911
    Chris Coyier
    Keymaster
    #251912
    danbrooks1108
    Participant

    THANK YOU!!
    That is exactly what I need, and SO much neater than the way I ended up doing it.
    I appreciate it very much!
    The only thing I changed was I added li {display: inline-block; }
    to make it go across instead of down.

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