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 trialJhaycea Parayno
1,350 Pointscan someone pls give me the answer and explain cuz im really having difficulty in comprehending the question.
Add a hover state for navigation links that changes the text color to the value #32673f.
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, nav a: hover {
color: #fff;
color: 32673f;
}
Jhaycea Parayno
1,350 Pointseven if i remove the space I'm still having errors. Make sure that you've styled links (a) elements inside the nav to be white with a hexidecimal value.
lucybeck
6,055 Pointssolution:
..... nav a: hover{ color:#32673f; }
4 Answers
tootiemcflow
5,601 PointsYou're actually pretty close, just a few mistakes we can fix. Let's take a look at the last css rule block.
nav a.selected, nav a: hover {
color: #fff;
color: 32673f;
}
There's two problems here. First one is the space between the :
(semi-colon) and hover
. The second is there's two color declarations and one of which is missing #
symbol that defines the value as a hex color. Remember that when you write two or more of the same declarations that will target same element the declaration that comes last will override the others. Meaning the #32673f;
value would override #fff
color value.
To fix this let's make a separate CSS rule that only targets the hovering pseudo class link within a nav
element.
nav a:hover {
color: #32673f;
}
sizwengubane
15,244 PointsHello this is the answer for the last question of the challenge <blockquote>
nav a:hover {
color: #32673f;
}
</blockquote> Mark my answer as the best if this helped
bothxp
16,510 PointsHi Jhaycea,
The way that I answered tasks 3 & 4 was by:
nav a {
color: #ffffff;
}
nav a:hover {
color: #32673f;
}
I used 2 separate rules. One to add a color to all of the anchor elements within the nav element and then a second rule to only add color to the anchor elements within the nav element that I am hovering over using my mouse.
In your answer you are trying to set the color twice within the one rule.
Does that help?
Jhaycea Parayno
1,350 Pointsyeah it helps, thanks buddy
Gunhoo Yoon
5,027 Pointsnav a.selected, nav a: hover {
color: #fff;
color: 32673f;
}
You don't need to add class to nav a.selected
as question doesn't ask for it. nav a.selected
is fine.
nav a: hover
has space between a:
and hover
.
color: 32673f
is missing #
, hex color requires them.
Finally nav a
and nav a:hover
should be treated as separate rule as question wants nav a
to be in #fff and nav a:hover
to be #32673. Above code sets color for both elements to be #32673f because second color rule overrides the first one.
nav a {
color: #fff;
}
nav a:hover {
color: 32673f;
}
lucybeck
6,055 Pointslucybeck
6,055 PointsTry taking out a space -
a:hover