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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Posted by Mirtac Akpinar
Mirtac Akpinar
829 Points

Cannot hover the anchor that covers image and paragraph

<section> <nav> <ul id = "gallery"> <li> <a href = "img/numbers-01.jpg" alt = ""> <img src = "img/numbers-01.jpg" alt = ""> <p>The first picture</p> </a> </li>

    <li>
      <a href = "img/numbers-02.jpg" alt = "" >
        <img src = "img/numbers-02.jpg" alt = "">
        <p>The second picture</p>
      </a>
    </li>

     <li>
      <a href = "img/numbers-06.jpg" alt = "" >
        <img src = "img/numbers-06.jpg" alt = "">
        <p>The third picture</p>
      </a>
    </li>

    <li>
      <a href = "img/numbers-09.jpg" alt = "">
        <img src = "img/numbers-09.jpg" alt = "">
        <p>The fourh picture</p>
      </a>
    </li>
    <li>
      <a href = "img/numbers-12.jpg" alt = "">
        <img src = "img/numbers-12.jpg" alt = "">
        <p>The last picture</p>
      </a>
    </li>
  </ul>
  </nav>  
</section>

my code above is the same of the code in the video. I try to change the color of the anchors when i hover them. In other words i want the paragraphs (like "this is the first picture") change. i used the code below but it did not work.

gallery li a:hover{

color: #555; }

and also i tried this

nav ul li a:hover{ color: #555; }

3 Answers

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Your gallery is an id but you wrote it in your html like it is an http element. You need to change your CSS to: #gallery.

Once written correctly, this should work, but I would probably create a class like pic and use that in each anchor. You then can use it other places as well.

Mirtac Akpinar
Mirtac Akpinar
829 Points
Mirtac Akpinar
Mirtac Akpinar
829 Points

Thank you guys for answer, but i cannot still do the hover thing.

theodere, actually i wrote the hashtag at the begining of "gallery" but it is not seen right now. I think the hashtag made that line's font bigger in a way. So i tried your first suugestion.

And i tried the other one

<ul id = "gallery"> <li> <a href = "img/numbers-01.jpg" alt = "" class = "selected"> <img src = "img/numbers-01.jpg" alt = "" id = "asd"> <p>Asiri cool bi resim</p> </a> </li>

    <li>
      <a href = "img/numbers-02.jpg" alt = ""  class = "selected">
        <img src = "img/numbers-02.jpg" alt = "">
        <p>Bu daha cool</p>
      </a>
    </li>

     <li>
      <a href = "img/numbers-06.jpg" alt = ""  class = "selected">
        <img src = "img/numbers-06.jpg" alt = "">
        <p>Ama en coolu bu</p>
      </a>
    </li>

    <li>
      <a href = "img/numbers-09.jpg" alt = "" class = "selected">
        <img src = "img/numbers-09.jpg" alt = "">
        <p>Bu biraz daha coolmus</p>
      </a>
    </li>
    <li>
      <a href = "img/numbers-12.jpg" alt = "" class = "selected">
        <img src = "img/numbers-12.jpg" alt = "">
        <p>Tamam kesinlikle bu en cool</p>
      </a>
    </li>
  </ul>

and css part

a.selected:hover{

color:black;

}

what am i doing wrong?

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I am on my iPad right now and cannot format code properly. I will be on a computer in about an hour.