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 trialEric Grace
880 PointsHow do you change color of nav link when hovering over it?
Nav link is white. How do you change it's color when you hover over it?
white link nav a { color: #fff; }
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
p {
color: #000;
}
nav a {
color: #fff;
}
nav a.hover {
color: #32673f;
}
5 Answers
Radu Ioan Stochita
3,558 PointsEvery answer here is correct, but let me explain everything you need to do for you.
Firstly, when you want to use some styling on an element when it's in a specific state, like when you hover over it, or when you click on it or when you look at it after you've visited that you need to use a pseudo-class. A pseudo-class is not a class, that's why it has that prefix pseudo, which means false.
class - .
pseudo-class - :
Here is an error, you tried to change the color of the anchor element when you hover over it, but you used a class, instead of a pseudo-class.
nav a.hover {
color: #32673f;
}
You should change it like this:
nav a:hover {
color: #32673f;
}
I hope that this helps!
Abe Layee
8,378 PointsYour error
nav a.hover {// it should be nav a :hover
color: #32673f;
}
correct format
nav a:hover {
color: #32673f;
}
Hamza Bouzid
2,425 Pointsnav a:hover { color: #32673f; }
Nurul Ahsan
2,039 PointsIts right way to change the hover color
Baptiste Fehrenbach
2,227 PointsThe dot is for the classes, to use hover you have to do: 'nav a:hover'
Ron Horn
7,591 Pointsit's just..........a:hover:#;
Nurul Ahsan
2,039 PointsI think: ul li a:hover{ color:#32673f; }