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 How to Make a Website Customizing Colors and Fonts Write Hexadecimal Colors

Posted by Eric Grace
Eric Grace
880 Points

How 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; }

css/main.css 
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
Radu Ioan Stochita
3,558 Points

Every 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
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Your error 

nav a.hover {// it should be nav a :hover
  color: #32673f;
}

correct format

nav a:hover {
  color: #32673f;
}
Hamza Bouzid
Hamza Bouzid
2,425 Points
Hamza Bouzid
Hamza Bouzid
2,425 Points

nav a:hover { color: #32673f; }

Nurul Ahsan
Nurul Ahsan
2,039 Points

Its right way to change the hover color

Baptiste Fehrenbach
Baptiste Fehrenbach
2,227 Points
Baptiste Fehrenbach
Baptiste Fehrenbach
2,227 Points

The dot is for the classes, to use hover you have to do: 'nav a:hover'

Ron Horn
Ron Horn
7,591 Points
Ron Horn
Ron Horn
7,591 Points

it's just..........a:hover:#;

Nurul Ahsan
Nurul Ahsan
2,039 Points
Nurul Ahsan
Nurul Ahsan
2,039 Points

I think: ul li a:hover{ color:#32673f; }