Jquery 我如何保持悬停效果像一个评级的css条码？

单击代码并查看它。我可以做我想要的所有悬停效果，除了一个在用户单击单选按钮后我不能保持绿色突出显示的效果。与大多数星级代码一样，如果用户选择第三个单选按钮，前三项应为绿色。我知道我应该使用

~

，

:checked

和

:not（：checked）

，我已经尝试了很多，但是失败了，感谢你的帮助

#额定值(u条){
宽度：100px；
高度：30px；
保证金：4px175px！重要；
显示：内联块；
显示：内联；
}
#评级栏>标签：之前{
内容：'0'；
颜色：#C7C5C5C5；
光标：指针；
字号：3em；
}
#分级栏：悬停>标签：之前{
颜色：#4bce32；
}
#评级栏>标签：悬停~标签：之前{
颜色：#C7C5C5C5；
}
#评级栏>输入：选中~标签：之前{
颜色：#C7C5C5C5；
}

这类事情可能很困难，因为
~
只查看元素后面的同级，而不查看元素前面的同级。您可以使用
鼠标悬停
绕过此问题，但如果使用
：checked
，则可能无法解决此问题

不过，在这种情况下，有一个解决办法。您可以使用
float:right
直观地反转元素的顺序，同时保持它们在DOM中的顺序。因此，只需颠倒标记中元素的顺序即可。然后，使用
~
将影响视觉上位于前面的元素，因为它们实际上位于dom中的后面


#额定值(u条){
宽度：130px；
高度：30px；
保证金：4px175px！重要；
显示：内联块；
}
#评级栏>标签{
浮动：对；
}
#评级条>输入{
显示：无；
}
#评级栏>标签：之前{
内容：'0'；
颜色：#C7C5C5C5；
光标：指针；
字号：3em；
}
#分级栏>标签：悬停：之前{
颜色：#4bce32；
}
#评级栏>标签：悬停~标签：之前{
颜色：#4bce32；
}
#评级栏>输入：选中~标签：之前{
颜色：#4bce32；
}
因为CSS中没有以前的同级选择器。解决方案是颠倒字符的顺序，使其行为类似于下一个兄弟


#额定值(u条){
显示：内联；
unicode-bidi:bidi覆盖；
方向：rtl；
}
#评级条>输入{
显示：无；
}
#评级栏>标签[标题]{
方向：ltr；
}
#评级栏>标签：之前{
内容:'★';
颜色：#C7C5C5C5；
光标：指针；
}
#评级栏>标签：悬停：之前，
#评级栏>标签：悬停~标签：之前，
#评级栏>输入：选中~标签：之前{
颜色：绿色；
}
看看这张图片，我建议您将鼠标悬停和所选颜色稍微区别开来：