当用户第一次将鼠标悬停在标签上时，如何从字段集标签中删除CSS样式？

Question

我有下面的小提琴供我的字段集星级评定选择器：

https://jsfiddle.net/bxd107gv/

它的默认设置为5星，但如果合适，用户可以单击一个以将选择项修改为较小的值，但是；我认为风格：

.rating > label{
    color:#FFD700;
}

通过应用进行干扰，因此我尝试在JS中执行一次鼠标悬停事件，以将星星设置回其默认颜色，但是问题完全相同，但是颜色不同；我要如何修改它，以便在用户从5颗星更改为任何其他值之后，只有选中的星星突出显示为黄色，其余的显示为灰色？

Answer 1

您可以在容器中添加一个类来标记额定状态，并在额定容器中的标签上添加附加的额定CSS：

1. 将以下javascript添加到您要处理速率逻辑的setRating函数中

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

2. 在css文件末尾添加以下css

.rated > label{
  color: #a5a5a5;
}