Results summary component 【 React & TypeScript 】

Solution retrospective
Hi there! 👋
I had a lot of fun doing this challenge, however I cannot figure out why the hover
effect doesn't work on my button.
I would be very grateful if you had any insight about this problem.
Thanks
Please log in to post a comment
Log in with GitHubCommunity feedback
- @tomazi15
Hi @Kure-ru
The problem you are having is is
z-index: -1
I think what this does it puts yoursummary section
behind everything thing even including thebody
and even dough it is visible on the page because its is not covered by any other element. In short the the whole summary section sits behind and the whole section is not clickable including your button hence why you cannot see thehover effect
.Even if you inspect the element you will see you cant pick any elements on your summary sections but you can on your result section.
To fix this
add
z-index: 10
to your summary class andz-index: 20
to your results class. This way you will not be sending anything behind the pagebody
but you will simply put result on top of summary.If you still struggling i can make a PR to your repo :)
Hope this helps keep coding 👌
Marked as helpful - @kaseyvee
Hello! Your z-index in .summary is set to -1.
Instead, you can remove that z-index and add
z-index: 1;
to .result.Marked as helpful
Join 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