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 Tim Pearson
Tim Pearson
301 Points

change color of hover link

Can't seem to change the color in the hover link. I don't know why, but I have been over the instruction videos and when some of these so-called test questions come up, it really hasn't been covered , and I went back over videos several times?

What I mean is, that certain commands or code aren't really covered, or it is so brief you might miss the mention of it. Pretty frustrating!

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

h1, h2 {
  color: #fff;
}

p {
color: #000
}

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

nav a {
color: #fff
}

#logo {
  text-align: center;
  margin: 0;
}

3 Answers

Lawrence Schoch
Lawrence Schoch
8,174 Points

Tim,

Tim,

Sorry if this is way off base but I was wondering if you are trying to change the background color instead of the text color for the link that is hovered? For background color, the attribute would be as follows:

nav a: hover { 
    background-color: #32673f; 
}
Tim Pearson
Tim Pearson
301 Points

No I wasn't but thanks for the tip. BTW, I finally figured out what i was doing wrong. Thanks for the feedback :-)

Paul Crow
Paul Crow
21,558 Points
Paul Crow
Paul Crow
21,558 Points

Your syntax seems to be a little off here:

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

HTML links are defined with the "a" tag. The link address is specified in the href attribute. Try this instead, it will target specifically the nav links on hover:

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

p.s. Also, don't forget to end lines of code inside brackets {} with a semi-colon, this tells the browser you're done with the block of code. Semi-colons are not necessary with some other languages like Ruby.

p { color: #000 <-- Missing semi-colon }

nav a { color: #fff <-- Missing semi-colon }

Tim Pearson
Tim Pearson
301 Points

Okay thanks, I' ll try that

Tim Pearson
Tim Pearson
301 Points

Nope your suggestion doesn't work on changing the hover color? The other you suggested for adding in the semi colon is fine though

Lawrence Schoch
Lawrence Schoch
8,174 Points
Lawrence Schoch
Lawrence Schoch
8,174 Points

Congrats on solving your problem. :-)