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

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

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

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

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

Its right way to change the hover color

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

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

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