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

Posted by Emily Larcher
Emily Larcher
220 Points

hover and selected element not working

This is for my nav element Here is the Css /********************************** GENERAL ***********************************/

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; } section { font-family: 'Poiret One', cursive; } /********************************** HEADING ***********************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Hammersmith One', sans-serif; margin: 15px 0; font-size: 3em; font-weight: normal; line-height: 0.8em; }

h2 { font-family:'Shadows Into Light', cursive; font-size: 2.75em; margin: -5px 0 0; font-weight: normal; }

/********************************** NAVIGATION ***********************************/

nav { font-family:'Pacifico', cursive font-size: 2.5em; text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/********************************** FOOTER ***********************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

/********************************** PAGE: PORTFOLIO ***********************************/

/********************************** PAGE: ABOUT ***********************************/

/********************************** PAGE: CONTACT ***********************************/

/********************************** COLORS ***********************************/

/* site body */ body { background-color: lightblue;

} section { color:darkbrown } /* green header */ header { background: lightblue;

}

/* nav background on mobile */ nav { background: lightblue; }

/* logo text / h1 { color: white; } h2{ color: red; } / links */ a { color: #6ab47b; }

/* nav link */ nav a, { color: #fff; }

/* selected nav link */ nav a:selected, nav a: hover { color: darkblack; }

footer{ color:darkred; }

And here is my HTML

<!DOCTYPE html> <html> <head> <meta charset ="utf-8"> <title>The Great Big Tobler Family</title>

 <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light|Poiret+One|Pacifico|Hammersmith+One|Cinzel:400,900' rel'=stylesheet' type='text/css'''>
<link rel ="stylesheet" href = "css/main.css">

</head> <body> <header> <a href="index.html" id = "logo">

    <h1>The Great Big</h1>
  <h2>Tobler Family</h2>   
   </a> 

  </header>
  <div id="wrapper">
  <nav>
  <ul>
    <li><a href="index.html" class="selected">Home page</a></li>
      <li><a href="judyandron.html">Ron and Judy</a></li>
      <li><a href="Ashlee.html">Ashlee</a></li>
      <li><a href="Emily.html"> Emily</a></li>            
      <li><a href="Mark.html"> Mark</a></li> 
      <li><a href="Ryan.html"> Ryan</a></li>            
      <li><a href="Trent.html"> Trent</a></li> 
    </ul>

    </nav>



    <section>
          <ul>
            <style>

              </style>    
              <p>Judy Tobler will give WWD this information</p>

            </ul>
        </section>  
         <footer>    
   <p>&copy; 2014 Wilde Web Design</p>
 </footer>
 </div>
  </body>

Thanks so much!

2 Answers

James Calby
James Calby
15,202 Points
James Calby
James Calby
15,202 Points

Change your Hover CSS code to this: ( you have a space between the colon and hover, that needs to be removed )

/* selected nav link */
nav a.selected, nav a:hover {
  color: #000;
}

/* link colors*/
a {
  color: #6ab47b;
}
Emily Larcher
Emily Larcher
220 Points
Emily Larcher
Emily Larcher
220 Points

and also the color for the nav is green when I would like them to be white when not on the page and black when hovered and on the page Thank you