Design comparison
Solution retrospective
This would be my second project on frontend mentor. It feels nice to have completed this project and see it be almost the desired output. I would learn a bit of JS and make it more responsive
What challenges did you encounter, and how did you overcome them?I couldn't figure out how to change the property of a parent element when hovering over a child element with only html and css. I didn't want to use JS as I wanted this to be a pure html css project. I would really appreciate if someone can suggest a way.
Community feedback
- @DylandeBruijnPosted 4 months ago
Hi @mayank1405,
I'm glad I was able to help you out! Could you mark my comment as helpful when you have the chance? That would help me out a great deal!
I read the challenge again but couldn't find the specification to increase the
box-shadow
on the card when hovering the card title. But I must admit I have seen some other people do it. What I think is that they grow thebox-shadow
when the user hovers on the card and turn the card title yellow when that gets hovered. So there are two separate hover animations.Marked as helpful1@mayank1405Posted 4 months ago@DylandeBruijn hmmmm...... Ok I guess I should check that out. Anyways, Thanks again Dylan. Really appreciate the help.
0 - @DylandeBruijnPosted 4 months ago
Hi @mayank1405,
Congratulations on another great solution! It's good that you want to learn a bit of JS an try to make it more responsive.
I would love to help you out with your challenge, but I'm confused what you are describing:
I couldn't figure out how to change the property of a parent element when hovering over a child element with only html and css.
Marked as helpful1@mayank1405Posted 4 months agoHi @DylandeBruijn Thanks a lot Dylan, your replies really are very encouraging and helpful. Much appreciated. The thing is in this challenge I had to implement a feature, that is whenever I hover upon the html and css text thats written in bold, it should turn yellow and the box's shadow should increase. Now all my elements are inside the whitebox div. That is a parent element. The text "HTML & CSS" is inside this div. It is a child of that. Now I want to know what to do so that when I hover on html css text, whitebox's shadow increases.
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