Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Seth Barthen
Seth Barthen
11,266 Points

Trying to make background color and color for nav-bar LI element transition, but can't get them to line up!

So basically what the title says. I have a nav-bar with 4 LI elements. When you hover over them I basically want the colors to invert. I figured it out... mostly. The challenge that I am having is that if I hover over just the LI element the background will transition but the actual font will not transition until I hover over that as well.

How do I make it so that both the background color and font color will transition at the same time regardless of where I am hovering over?

.main-nav li {
    float:  left;
    display:  block;
    padding: 10px;    
    border-right: 1px dotted #5e5e5e;
    font-size: 1.25em;
    transition: background 1s ease;
}

.main-nav a {
    transition: color .8s ease;
}

.main-nav li:hover {
    background:  #356ef7;
}

.main-nav a:hover {
    color: #FFF;
}

2 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Try changing your last selector to this:

.main-nav li:hover a {
    color: #FFF;
}

I think that will do what you want. The link transition will take place whenever it's color is changed. So here we're saying, whenever you are hovering over the li, make the link text white. This changes it's color property from what it was before and causes the transition to take place.

Seth Barthen
Seth Barthen
11,266 Points

That did work; however, the background was only behind the a element and not the entire li section. I tried to give a element a padding to enlarge it, but then that would just move the other element around. So I changed it to this.

css
.main-nav ul {
    display:  inline-block;
    list-style: none;
    padding-left: 0;
    margin:  0;
    overflow: hidden;
}

.main-nav li {
    float:  left;
    display:  block;
    padding: 10px;    
    border-right: 1px dotted #5e5e5e;
    font-size: 1.25em;
    transition: background 1s ease;

}

.main-nav a {
    transition: color 1s ease;
}

.main-nav li:hover,
.main-nav li:hover a {
    background:  #1fc5ac;
    color:  #FFF;
}
Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Not sure why that would happen unless it's something going on with the rest of your css that I haven't seen. You didn't have a background color set on your li in it's resting state so I assumed you were just showing through the parent background. you shoudn't have to set a background on the a element. The background on the li should show through unless you've previously given your a elements a background color.

This is the codepen I used to test the selector: http://codepen.io/anon/pen/uvqab/ Is that doing what you want? That's your original css with only the last selector changed.

Seth Barthen
Seth Barthen
11,266 Points

Yeah it is... hmmm I must be messing something up then! Bah!