Grow your CSS skills. Land your dream job.

How to add hover colors to individual menu elements?

  • # April 23, 2013 at 2:11 pm

    Hey! I am fighting with a menu where I would like to have different a:hover colors on each menu element, but I can’t get it to work. I would greatly appreciate if someone could tell me what to add/change in my code to get this working. You can see a live version of my code and the menu here: http://jsbin.com/ivoqoh/1/edit

    So far, when you hover over the elements, they all have the same green color. I would like to give each of them their own color. Thanks!

    # April 23, 2013 at 2:26 pm

    You can select each link with nth-child or give each anchor a unique class and style them that way.

    # April 23, 2013 at 3:01 pm

    I recommend using the class since IE8 and older doesn’t support NTH-child unless you go into some hacking.

    # April 23, 2013 at 4:01 pm

    Thank you for replies. I have tried to give each anchor id’s and classes, but my hover styles never seem to take effect, like they are overwritten by something else in the code. I would greatly appreciate if you could perhaps show me via my JsBin link how you would do it, as I really don’t understand why it won’t work. :/

    # April 23, 2013 at 4:36 pm

    Wow, what an interesting set up this is. I removed some of the initial background declarations from the top and if you scroll down to the bottom of the CSS you’ll see the additions that I’ve made: http://codepen.io/ggilmore/pen/5bf3889d9e19fdb794f28fff0daac219

    # April 23, 2013 at 6:18 pm

    TheDoc, thank you very much! I think it would have taken me a long time to figure that out… but it works great. :) Thanks!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".