Design comparison
Solution retrospective
did it
What challenges did you encounter, and how did you overcome them?to organize links list
What specific areas of your project would you like help with?Alright, I'm still wondering, is active state an hover or active pseudo class.
and how can I change the background color of link and color of the link text together when I hover over at link's area, but not directly to link text?
please help.
- sorry I set the container width by percent, and messed up this
Community feedback
- @Code-BeakerPosted 6 months ago
Hi there, congratulations on completing this project. You've done a great work with this one! 🎉
The active states is activated on hovering on the link. You can change the properties of the link using a few lines of CSS.
- the body needs a
min-height: 100vh
instead ofheight: 100vh
. - I recommend changing the class "link" to the
a
tag fromli
to make it easier to style them.
This is the current markup
<li class="link"><a href="#">Github</a></li>
This is the new markup
<li><a class="social-link" href="#">GitHub</a></li>
Then let's create the active state.
.link:hover { background-color: var(--green); color: var(--dark-grey); }
This should do the work. You need to be aware of the different class names you assign to different elements. In this code, the
a
must be the link. Theli
is not a link as you may know.Hope this helps you! 😊
0 - the body needs a
- @manav-sharma69Posted 6 months ago
Hi! There's nothing wrong in using percentage to set widths. However, if you set widths using em, there's a good chance that you'll be sorry 😂
Regarding the background and color problem, this should work:
.link:hover
- use this to change the background color of link on hover (you've already implemented this part).link:hover a
- use this to changecolor
ofanchor tag
when user hovers overli
or,.link
.What it's doing is selecting the
anchor
when the user hovers over yourli
element.Descendant combinator - you've used it before in your code
Hope this helps 🙏
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord