Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Customizing Colors and Fonts Write Hexadecimal Colors

Add a hover state for navigation links that changes the text color to the value #32673f. I need help with this one

nav a.selected, nav a:hover {
color:#fff;
color: #32673f;
}

the solution is:

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

mohammed mayat
mohammed mayat
4,228 Points

when i hover over link color does not change my code for hover

nav a.selected, nav a:hover { color: #32673f; }

32 Answers

James Barnett
James Barnett
39,199 Points

jose sias - Here are 2 hints to get you pointed in the right direction.

  • These should each be their own rule.
  • I don't know what you are doing with the class .selected it wasn't mentioned anywhere in the code challenge.

• The video preceding the challenge shows a single rule.

• The video preceding the challenge shows the class .selected.

I think this challenge needs to be re-worked to match the video.

Sometimes I feel like the code challenge is more about "what the author meant" rather than actual training. I do not mean to say that the challenges are not productive in any way. maybe that's good I haven't decided yet...

I have the same problem with this question I write:

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

and it says: Did you style nav links hover state (:hover)? Please help!

James Barnett
James Barnett
39,199 Points

Looks like you've got a space between a: and hover. Remember in CSS, spaces are syntactically significant as a space is the combinator for the descendent selector.

remove the space between: and hover and you'll get it right. It took me several tries before I got it. nav a:hover {color: #32673f}

I tried that, and it actually worked!!!! Thanks! :D

nav a:hover { color: #32673f }

lina Hernandez
lina Hernandez
4,583 Points

nav a.selected, nav a:hover { color: #32673f; }

THIS WORK !! thanks

thanks james i got it

Sidney Casagrande
Sidney Casagrande
7,035 Points

I think there are 2 issues here. Issue 1: I don't think you need 2 color tags. Does not make much sense to me. Note: The hover state will only change the original color to the in the hover state specified color while you mouse over that object. Issue 2: All color tags need 3 sets of 2 hexadecimal numbers (Red, green and blue) So: #32673F is correct (Note: '32' is for how much red there is, '67' for green and '3F' for blue) #FFF is invalid

Hope that helps.

#FFF is a valid color value. It's shorthand for #FFFFFF

#2AF is shorthand for #22AAFF

Joe Brown
Joe Brown
21,465 Points

You should only need one color like the other guy said. You can however use #fff, its just a shortcut that is valid, it is used in the videos here which is where im sure you learned it. But your post says you want #32673f, so just delete that #fff.. Good luck bud

Joe Brown
Joe Brown
21,465 Points

Oh I think I see your problem. Split your css code there into 2 separate rules. One will be nav a.selected {color:#fff} and then a separate one that is a:hover {color:#32673f}

hope this helps

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.selected { color: #fff; }

a:hover {
color: #32673f;

lina Hernandez
lina Hernandez
4,583 Points

I been trying a:hover {color: # }

Not really working

Joe Brown
Joe Brown
21,465 Points

Is everything else working fine besides the hover? And do you have your ending curly braces on the code your running for the hover? Cause you left it out in the code you posted here

yes this was the last code challenge

Joe Brown
Joe Brown
21,465 Points

Is it telling you specifically that the hover is wrong? That is the right way pseudo class rule for hover. In the code you posted your wrapper and logo classes or id's aren't right in the css. They should start with a # if they are id's or a . If they are classes, like .wrapper or #wrapper

No it just says I need to style the links

What happened? How did you solve the problem?

hope this elp

nav a.selected, nav a:hover { color: #32673f; }

I am having the same problem. Here is what I entered:

nav a.selected, nav a:hover {color: #32673f;} and i get the "bummer" message.

I also tried: nav a:hover {color: #32673f;}

Clyde Taylor
Clyde Taylor
1,123 Points

nav a: hover { color: #32673f }

Lara Whateley
Lara Whateley
2,099 Points

I completed it with this:

nav a { color: #ffffff; }

nav a.selected, nav a:hover { color: #32673f; }

Bummer. Did you style nav links hover state (:hover)?

nav a { color: #fff; }

nav a:hover { color: 32673f; }

I am still getting this result. I went back and typed in the nav a:hover from scratch and then rechecked work. No joy. ??!!

You're missing the # in front of your hex code.

Elda, use a colon, not a period. This : Not this .

this one passed for me

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

hope this will help guys

nav a { color: #ffffff; }

nav a.selected, nav a:hover { color: #32673f; }

This worked for me!

Briana Smith
Briana Smith
4,045 Points

I used:

nav a.selected, nav a:hover { color:#32673f; }

which is incredibly frustrating as you are not told that there is a class .selected in the html file, nor can you see the html file. I can't believe it's been 2 years and this has not been fixed!

nav a { color: #ffffff; }

nav a.selected, nav a:hover { color: #32673f; }

Answer is nav a{color:#32673f;}

Hope this helps

HAHAHAHA when you don't know how to code :D

it sucks.......

jonathan Doss
jonathan Doss
1,385 Points

my problem seemed to be having a space on nav a: hover{} ... no space i think fixed it

nav a:hover { color: #32673f }

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

changes the links on hover ...

It says make sure you styled links (a) elements inside the nav to be white with hexidecimal value idk what I'm doin wrong here

nope that dont work either

nav a.hover{ color:#32673f; } and its telling me: Did you style nav links hover state (:hover)? please help me

nav a:hover { color: #32673f }