Forums

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

Home Forums CSS How to add hover colors to individual menu elements?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #44322
    Bobba
    Member

    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!

    #132896
    TheDoc
    Member

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

    #132902
    apart
    Participant

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

    #132917
    Bobba
    Member

    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. :/

    #132920
    TheDoc
    Member

    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

    #132927
    Bobba
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.