Creating A Navigation Bar Where Each Link Has A Different Hover Colour

I'd like to make a black navigation bar for my website, and when you hover over the first link it goes orange, the second link it goes green, etc. I know how to change colour on ho

Solution 1:

What you're doing is on the right track, but don't repeat the CSS over and over:

#navbar ul li a:hover { 
    color: #ffffff; 
    padding-top:15px;
    padding-bottom:15px;
}

#navbar ul #link1 a:hover { 
    background-color: #C62222; 
}

#navbar ul #link2 a:hover { 
    background-color: #28C622; 
}

As others have noted, you also need to either remove the space between the li and your id, or just remove the li entirely (since there is only one link1, you don't necessarily need to tell the browser that it is an li).

Additionally, if you want, you can (and probably should) simply those selectors all the way down to #link1 a:hover and #link2 a:hover. It's more of a stylistic choice, but it helps to keep your code clean.

Solution 2:

You have a bad selector. The li is superfluous.

#navbar #link1 a:hover { 
    color: #ffffff; 
    background-color: #C62222; 
    padding-top:15px;
    padding-bottom:15px;
}

Solution 3:

You need to remove the space between li and #link1:

#navbar ul li#link1 a:hover

You could further optimize your CSS like this:

#navbar a { 
    text-decoration: none; 
    padding: 25px 30px; /* shortcode for top/bottom - left/right */
    color: #ffffff; 
    background-color: #000000; 
}
#navbar a:hover {  /* common hover styles */
    color: #ffffff; 
    padding:15px 30px;
}

#link1 a:hover { /* individual hover styles */
    background-color: #C62222; 
}

#link2 a:hover {  /* individual hover styles */
    background-color: #28C622; 
}

Solution 4:

remove the space between li and #link2.

#navbar ul li#link1 a:hover { 
    color: #ffffff; 
    background-color: #C62222; 
    padding-top:15px;
    padding-bottom:15px;
}

#navbar ul li#link2 a:hover { 
    color: #ffffff; 
    background-color: #28C622; 
    padding-top:15px;
    padding-bottom:15px;
}

Solution 5:

You were close, but the space between li and #linkX is causing problems. These are not two separate elements, so they should be combined. One possible method is:

#navbar ul li#link1 a:hover {
    ....

Alternately, you can use:

#navbar ul #link1 a:hover {
    ....

You may wish to combine the duplicated styles into a single directive:

#navbar ul li a:hover {
    color: #ffffff; 
    padding-top:15px;
    padding-bottom:15px;
}

Then use only the changed style as needed:

#link1 a:hover {
    background-color: #C62222;
}