Interactive Rating Component with nextjs

Community feedback

• 

  Giovanni Ruberto•260

  @RabberpoliPosted over 1 year ago

  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!

  0

  ---

  

  Faisal Ahmed•410

  @faisalahmed11Posted over 1 year ago

  Thanks, dear @Rabberpoli, hovering is working correctly but, I wanted to change the colour of the selected rating while hovering over its siblings. It is like notifying siblings about the selected rating. you can find a screenshot of the effect in the design folder of the challenge provided by Fronend mentor.

  0

  

  Faisal Ahmed•410

  @faisalahmed11Posted over 1 year ago

  @Rabberpoli Sorry for the inconvenience, I found that the active colour is different than the hovering colour.

  0

  

  Giovanni Ruberto•260

  @RabberpoliPosted over 1 year ago

  @faisalahmed11 No problem! Yes, hover and active states are different from each other and get triggered on different actions on DOM as well. So back to your question: when you click a rating componente you could set its active color (e.g. grey, like screenshots suggest) and on hovered components you can set orange color. Just doing this you should be able to get the desired output! Let me know if I'm missing something... I'll be pleased to help you further!

  0