在jquery中纠正我

我有评级系统css，html和jquery代码。将鼠标悬停在星星（颜色）上是可以的，但当我单击星星并移除光标时，结果是一样的。我想将鼠标悬停在星星上并单击，然后应该更改颜色。对不起，我的英语不好，但我想你懂了。这是我的密码

$（文档）.ready（函数（）{
$（'.rating'）。单击（函数（）{
$（'.rating span'）。removeClass（'checked'）；
$（this.parent（）.addClass（'checked'）；
});
});
.rating{
unicode-bidi:bidi覆盖；
方向：rtl；
}
.额定值>跨度{
显示：内联块；
位置：相对位置；
宽度：14px；
颜色：#c4b8b8；
字体大小：25px；
}
.额定值>范围：悬停，
.额定值>跨度：悬停~span{
颜色：透明；
}
.额定值>范围：悬停：之前，
.额定值>span:悬停~span:之前{
内容：“\2605”；
位置：绝对位置；
颜色：金色；
}

★
★
★
★
★
好的，有两个问题：

1） 您正在将
选中的
类应用于正在单击的div的父级（
），而不是单个星号。我不得不调整jQuery的点击代码，使之以每个星为目标，而不是以div为目标

2） 您没有CSS以选中的
类为目标。我将其添加到处理悬停的CSS代码中


$（文档）.ready（函数（）{
$（'.rating span'）。单击（函数（）{
$（'.checked'）.removeClass（'checked'）；
$（this.addClass（'checked'）；
});
});
.rating{
unicode-bidi:bidi覆盖；
方向：rtl；
}
.额定值>跨度{
显示：内联块；
位置：相对位置；
宽度：14px；
颜色：#c4b8b8；
字体大小：25px；
}
.额定值>范围：悬停，
.额定值>跨度：悬停~span{
颜色：透明；
}
.额定值>范围：悬停：之前，
.额定值>span:悬停~span:之前，
.检查：之前，
.检查~span:之前{
内容：“\2605”；
位置：绝对位置；
颜色：金色；
}

★
★
★
★
★
您的单击功能没有跟踪所单击的明星用户


$（文档）.ready（函数（）{
$（'.rating span'）。单击（函数（）{
$（'.rating span'）。removeClass（'checked'）；
$（this.addClass（'checked'）；
});
});
.rating{
unicode-bidi:bidi覆盖；
方向：rtl；
}
.额定值>跨度{
显示：内联块；
位置：相对位置；
宽度：14px；
颜色：#c4b8b8；
字体大小：25px；
}
.额定值>范围：悬停，
.额定值>跨度：悬停~span{
颜色：透明；
}
.额定值>范围：悬停：之前，
.额定值>span:悬停~span:之前，
.额定值>量程检查：之前，
.额定值>span.已检查~span:之前{
内容：“\2605”；
位置：绝对位置；
颜色：金色；
}

★
★
★
★
★
这里有一个几乎相同的演示，希望对您有所帮助：谢谢您的帮助。