How do I drop the css style from the fieldset labels when the user has hovered over the labels for the first time?

Question

I have the below fiddle for my fieldset star rating selector:

https://jsfiddle.net/bxd107gv/

It's designed to default to 5 stars but the user can then click one to amend the selection to a lesser value if appropriate but; I think the style:

.rating > label{
    color:#FFD700;
}

Is interfering by applying that so I tried doing a mouseover event in JS to set the star back to it's default colour but that has the exact same issue but with a different colour; how do I amend this so that only the stars that are selected are highlighted yellow and the rest are grey after the user changes from 5 stars to any other value?

Answer 1

You can add a class to the container to mark the rated status when rating, and add an additional rated css to the label in the rated container:

1. Add the following javascript to the function setRating which you handle the rating logic

document.getElementById('starRatingSelection').classList.add('rated');

2. Add the following css at the end of you css file

.rated > label{
  color: #a5a5a5;
}