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

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

Posted by Jhaycea Parayno
Jhaycea Parayno
1,350 Points

can 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.

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.selected, nav a: hover {
  color: #fff;
  color: 32673f;
}
lucybeck
lucybeck
6,055 Points

Try taking out a space -

a:hover

Jhaycea Parayno
Jhaycea Parayno
1,350 Points

lucybobeck

even 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
lucybeck
6,055 Points

solution:

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

4 Answers

tootiemcflow
tootiemcflow
5,601 Points

You'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
sizwengubane
15,244 Points
sizwengubane
sizwengubane
15,244 Points

Hello 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
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

Hi 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
Jhaycea Parayno
1,350 Points

yeah it helps, thanks buddy

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points 
nav 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;
}