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
Andrew Rich
Courses Plus Student 349 Pointscant 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; }
3 Answers
Maximillian Fox
Courses Plus Student 9,236 PointsI 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? :)
Andrew Rich
Courses Plus Student 349 PointsThat worked! a freaking space was the problem, ridiculous....
thanks so much for the help!
Maximillian Fox
Courses Plus Student 9,236 PointsNice 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! :)
Andrew Rich
Courses Plus Student 349 Pointsthanks for the explanation, this makes sense. i never thought i would have gotten an answer back so fast.
Thanks Buddy
Maximillian Fox
Courses Plus Student 9,236 PointsMaximillian Fox
Courses Plus Student 9,236 PointsWe 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).