Skip to content
Submitted about 2 years ago

Interactive Rating Component with nextjs

accessibility, react, next
Faisal Ahmed•410
@faisalahmed11
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  1. Does anybody know how to change the background colour of a selected rating while hovering over other ratings?
Code

Please log in to post a comment

Log in

Community feedback

  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Well done doing this challenge! Looking at your code I see you have 5 html elements: one for each rating. If you'd like to change background color on hovering you should do the following:

    • Take the CSS class that defines background color of your rating components
    • Write this on your css: .<classname>:hover { background-color: <color>; }

    :hover property gets fired on CSS class when mouse passes over the targeted block.

    Hope you can find it useful! Keep going and happy coding!

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