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 trialjose sias
1,995 PointsAdd 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;
}
mohammed mayat
4,228 Pointswhen i hover over link color does not change my code for hover
nav a.selected, nav a:hover { color: #32673f; }
32 Answers
James Barnett
39,199 Pointsjose 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.
Rafael Lewis
1,518 Points• 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.
elem
Full Stack JavaScript Techdegree Student 4,801 PointsSometimes 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...
Valentina Delfino
5,646 PointsI 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
39,199 PointsLooks 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.
Eugene Bayot
753 Pointsremove 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}
Jose M Aboytes
2,775 PointsI tried that, and it actually worked!!!! Thanks! :D
Ary de Oliveira
28,298 Pointsnav a:hover { color: #32673f }
Ben Ahlander
7,528 PointsThanks!
lina Hernandez
4,583 Pointsnav a.selected, nav a:hover { color: #32673f; }
THIS WORK !! thanks
jose sias
1,995 Pointsthanks james i got it
Sidney Casagrande
7,035 PointsI 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.
Jason Anello
Courses Plus Student 94,610 Points#FFF
is a valid color value. It's shorthand for #FFFFFF
#2AF
is shorthand for #22AAFF
Joe Brown
21,465 PointsYou 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
21,465 PointsOh 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}
jose sias
1,995 Pointshope 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
4,583 PointsI been trying a:hover {color: # }
Not really working
Joe Brown
21,465 PointsIs 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
jose sias
1,995 Pointsyes this was the last code challenge
Joe Brown
21,465 PointsIs 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
jose sias
1,995 PointsNo it just says I need to style the links
Devah Lucus
1,066 PointsWhat happened? How did you solve the problem?
luis alvarado
Courses Plus Student 987 Pointshope this elp
nav a.selected, nav a:hover { color: #32673f; }
Anna Steirer
6,734 PointsI 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
1,123 Pointsnav a: hover { color: #32673f }
Lara Whateley
2,099 PointsI completed it with this:
nav a { color: #ffffff; }
nav a.selected, nav a:hover { color: #32673f; }
Sean Clipsham
1,664 PointsBummer. 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. ??!!
Jason Anello
Courses Plus Student 94,610 PointsYou're missing the #
in front of your hex code.
Sean Clipsham
1,664 PointsElda, use a colon, not a period. This : Not this .
MUZ1407800 Doubt Milazi
11,813 Pointsthis one passed for me
nav a:selected,nav a:hover{ color:#32673f; }
hope this will help guys
Brian Burnett
1,841 Pointsnav a { color: #ffffff; }
nav a.selected, nav a:hover { color: #32673f; }
This worked for me!
Briana Smith
4,045 PointsI 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!
Tek Poudel
1,872 Pointsnav a { color: #ffffff; }
nav a.selected, nav a:hover { color: #32673f; }
Sandisiwe E Usumani
6,918 PointsAnswer is nav a{color:#32673f;}
Hope this helps
Bella Burnett Caldwell
2,132 PointsHAHAHAHA when you don't know how to code :D
it sucks.......
jonathan Doss
1,385 Pointsmy problem seemed to be having a space on nav a: hover{} ... no space i think fixed it
Ary de Oliveira
28,298 Pointsnav a:hover { color: #32673f }
Jan Oberreiter
78,020 Pointsnav a:hover { color: #32673f; }
changes the links on hover ...
jose sias
1,995 PointsIt says make sure you styled links (a) elements inside the nav to be white with hexidecimal value idk what I'm doin wrong here
jose sias
1,995 Pointsnope that dont work either
MUZ140639 Elda Mufandarambwa
6,061 Pointsnav a.hover{ color:#32673f; } and its telling me: Did you style nav links hover state (:hover)? please help me
Ary de Oliveira
28,298 Pointsnav a:hover { color: #32673f }
josefh
2,295 Pointsjosefh
2,295 Pointsthe solution is:
nav a, nav a: hover{ color:#32673f; }