Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 2 years ago

Results summary component 【 React & TypeScript 】

react, typescript, vite
Kure-ru•120
@Kure-ru
A solution to the Results summary component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • Tomazi•300
    @tomazi15
    Posted about 2 years ago

    Hi @Kure-ru

    The problem you are having is is z-index: -1 I think what this does it puts your summary section behind everything thing even including the body 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 the hover 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 and z-index: 20 to your results class. This way you will not be sending anything behind the page body 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
  • kasey•320
    @kaseyvee
    Posted about 2 years ago

    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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub