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 trialMirtac Akpinar
829 PointsCannot 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
Courses Plus Student 17,967 PointsYour 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.
Yonatan Arbel
7,055 Pointsas theodore said.. :)
Mirtac Akpinar
829 PointsThank 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
Courses Plus Student 17,967 PointsI am on my iPad right now and cannot format code properly. I will be on a computer in about an hour.