Skip to content
Submitted almost 3 years ago

tip-calculator-novidicus-titan

Novidicus Titan•60
@NovidicusTitan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

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

  • Isabela Oliveira•310
    @oliveridsPosted almost 3 years ago

    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

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