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 Anh Pham
Anh Pham
2,891 Points

"nav a:hover" does not change the color of nav links when mouse is hovering over it

I hope my question above is clear. When i hover my mouse over the Portfolio, Contact, About me did not change their color to white. Here's my code

<!DOCTYPE html>

<html> <head> <meta charset="utf-8"> <title> Title </title> <link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/main.css"> </head>

<body> <header> <a href = "index.html" id="logo"> <h1> Anh Pham </h1> <h2> College Student </h2> </a> <nav> <ul> <li> <a href="index.html" class="selected"> Porfolio </a></li>
<li> <a href="about.html"> About </a></li> <li> <a href="contact.html"> Contact </a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="Image/numbers-01.jpg"> <img src="Image/numbers-01.jpg" alt="Error"> 

        <p> Experimentation with color and texture </p>
        </a>
      </li>

      <li>
        <a href="Image/numbers-02.jpg">
          <img src="Image/numbers-02.jpg" alt="Error">    

          <p> Playing with blending modes in Photoshop </p>
        </a>
      </li>

      <li>
        <a href="Image/numbers-06.jpg">
        <img src="Image/numbers-06.jpg" alt="Error">    

        <p> Trying to create an 80's style of glows </p>
        </a>
      </li>

      <li>
        <a href="Image/numbers-09.jpg">
        <img src="Image/numbers-09.jpg" alt="Error">    

        <p> Drips created using Photoshop brushes </p>
        </a>
      </li>

      <li>
        <a href="Image/numbers-12.jpg">
        <img src="Image/numbers-12.jpg" alt="Error">    

        <p> Creating shapes </p>
        </a>
      </li>

    </ul>
  </section>
  <footer>

    <a href="http://facebook.com/pii.ay.5"><img src="Image/facebook-wrap.png" alt="Facebook logo"></a>
     <a href="http://twitter.com"><img src="Image/twitter-wrap.png" alt="Twitter logo"></a>
    <a href="http://instagram.com/anh_w_pham"> <img src="Image/instagram-wrap.png" alt= "Instagram logo"></a>
    <a href="index.html"> <h6> Back to homepage></h6></a>
     <p> &copy; Nov 22 2016 Anh Pham</p>
  </footer>
</div>

</body>

</html>

and here is my CSS file

wrapper {

max-width: 900px;<!--max width allowed for mobile, desktop--> margin: 0 auto; <!-- set margin on top and bottom, auto center the content -->
padding: 0 5%; <!--0 on top and bottom, 5% left and right--> background-color: orange !important; }

logo {

color: red ; text-decoration: none; text-align: center; margin: 0 auto; <!-- 0pixel margin for all 4 sides of id="logo", change number to see difference -->

}

p { color: black; }

a { text-decoration: none; }

header{ background-color: #F9EBEA ; border-color: #2C3E50; }

nav, nav a{ background-color: #27AE60; color: black; text-decoration: none; }

nav a, nav a:visited{
color: grey; }

nav a.selected, nav a:hover{
color: white; }

body { background-color: pink; color: grey; <!--footer--> }

Alexander Lanz
Alexander Lanz
10,420 Points

Hi!

in the second last rule change:

nav a.selected, a:hover{ color: white; }

to

nav a.selected, nav a:hover{ color: white; }

2 Answers

Christof Baumgartner
Christof Baumgartner
20,864 Points
Christof Baumgartner
Christof Baumgartner
20,864 Points

Hi Anh, I just checked your code and it worked for me. I used workspaces in Chrome. Also your syntax seems fine. How did you test it. Do you have other css-files in your project that may override the rule? Try to use your browsers console to see if there are other rules that override your one, and look if there is a "hover"-rule at all, when you hove over it. You can use 'force element state' in chrome to simulate the hover-event.

Best Regards, Christof

Anh Pham
Anh Pham
2,891 Points
Anh Pham
Anh Pham
2,891 Points

Hi Christof, Thank you for your swift response. I have tried the code above in Workspace in Safari, Chrome, and Firefox but still failed to activate "hover" state. Can you please tell me more about how to use my browsers console to check for overridden rules?

I was able to solve my problem when I changed all the comment <!-- --> in my CSS file to /* */. How peculiar!