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

HTML How to Make a Website Customizing Colors and Fonts Use Classes in CSS

cant figure out why my navigation links wont change color when i hover over them.

not sure where i went wrong in my code, but the hover function (change to a different color when you hover the mouse over it) wont work on my navigation links.

a{ text-decoration:none }

logo {

text-align:center } a { color: #999999; }

header { background: #8a9a4a; border-color: #6a6b6c; }

h1,h2 { color: #fff; }

nav { background: #999; }

nav a, nav a:visited { color:fff; }

nav a.selected, nav a: hover { color: #000; }

Maximillian Fox
Maximillian Fox
Courses Plus Student 9,236 Points

We can try to help, can you edit your question and place the full HTML and CSS code into the question body? (use the markdown cheatsheet to help you get it displaying nicely).

3 Answers

Maximillian Fox
PLUS
Maximillian Fox
Courses Plus Student 9,236 Points

I think I see the problem:

nav a.selected, nav a: hover 
{ 
  color: #000; 
}

You have a space between your 'a:' and 'hover'. Remove that space and retest your styles.

nav a.selected, nav a:hover 
{ 
  color: #000; 
}

Does that let it work? :)

That worked! a freaking space was the problem, ridiculous....

thanks so much for the help!

Maximillian Fox
Maximillian Fox
Courses Plus Student 9,236 Points

Nice one, glad I could help :)

The next thing to understand is WHY a space is causing problems. Essentially, when you use CSS selectors, you can do things like

a:hover

which selects any anchor tag that's being hovered. But, if you do this:

a: hover

the CSS thinks you are looking for an anchor tag, but unlike the last example, CSS is then being told to select the 'hover' element within the anchor tag. But 'hover' is not actually a HTML element. So it won't apply the style. Also, I believe 'a: ' with nothing as its pseudo-class defined, counts as a syntax error in CSS.

You can always use the Inspect Element in Chrome to check your CSS styles, and the inspector should show you any syntax errors that the browser can't parse properly.

Keep coding! :)

thanks for the explanation, this makes sense. i never thought i would have gotten an answer back so fast.
Thanks Buddy