Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

tip-calculator-novidicus-titan

#sass/scss

@NovidicusTitan

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


does anyone know how to use :active & :hover correctly? I had to use !important or my hover effect did not work. any help is appreciated.

Community feedback

@oliverids

Posted

Hmm I might be wrong but I tested it really quickly on DevTools and I think the issue is that you didn't access the element correctly.

Notice how, for the main style, you accessed the element by ".card .input .percent .percent_btn button { ... }". However, for the hover, you used ".card .btn:hover { ... }". Might be just a matter of confusion for the browser ? I changed it to ".card .input .percent .percent_btn button:hover { ... }" and it worked just fine, without the !important.

Might be worth it to give it a try.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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