Javascript Mouseleave在使用相同功能时会覆盖单击

我正在尝试用javascript制作一个评级系统

我想在click和mouseenter上执行相同的函数，但在mouseleave上执行相反的函数，因为mouseleave会覆盖clicks函数

看看我想说什么。这是我的密码

$（文档）.ready（函数（）{
美元（“.rate_btn”）。在({
点击：功能（eve）{
$（this.prevAll（）.andSelf（）.addClass（“rate_btn_active”）；
var当前_评级=$（this.attr（'id'）；
$（“当前评级”）.html（当前评级）；
$（“#检查点击”）.html（“查看其工作：“+当前评级”）；
$（“#msg”）.html（“但由于鼠标被删除而无法保留。”）；
},
mouseenter:function（）{
$（this.prevAll（）.andSelf（）.addClass（“rate_btn_active”）；
var当前_评级=$（this.attr（'id'）；
$（“当前评级”）.html（当前评级）；
},
mouseleave:function（）{
$（this.prevAll（）.andSelf（）.removeClass（“rate\u btn\u active”）；
$（“#当前评级”）.html（“”）；
}
});
});
.rate\u btn{
宽度：25px；
高度：25px；
保证金：5px 1px；
边界半径：5px；
显示：内联块；
背景色：#D8D8D8；
}
.rate_btn_激活{
背景色：#11AB0E；
}
这里的代码与您的代码类似。我们将使用“active”类动态显示鼠标当前所在的所有框。但当我们实际单击时，我们将添加一个永久的“选定”类，即使mouseleave删除了“活动”类，该类仍将保持


$（文档）.ready（函数（）{
美元（“.rate_btn”）。在({
点击：功能（eve）{
$（'.selected'）.removeClass（'selected'）；
$（this.prevAll（）.andSelf（）.addClass（'selected'）；
var当前_评级=$（this.attr（'id'）；
$（“当前评级”）.html（当前评级）；
},
mouseenter:function（）{
$（this.prevAll（）.andSelf（）.addClass（“rate_btn_active”）；
var当前_评级=$（this.attr（'id'）；
$（“当前评级”）.html（当前评级）；
},
mouseleave:function（）{
$（this.prevAll（）.andSelf（）.removeClass（“rate\u btn\u active”）；
$（“#当前评级”）.html（“”）；
}
});
});
.rate\u btn{
宽度：30px；
高度：25px；
浮动：左；
}
.差饷物业估价署{
背景色：#D8D8D8；
边界半径：5px；
宽度：25px；
高度：25px；
}
#分级框：悬停。选定的分区{背景色：#D8D8D8；}
#ratingbox:hover.r1.rate_btn_active div{背景色：rgb（220,30,30）！重要；}
#ratingbox:hover.r2.rate_btn_active div{背景色：rgb（200,50,30）！重要；}
#ratingbox:hover.r3.rate_btn_active div{背景色：rgb（200200,30）！重要；}
#ratingbox:hover.r4.rate_btn_active div{背景色：rgb（50200,30）！重要；}
#ratingbox:hover.r5.rate_btn_active div{背景色：rgb（30,220,30）！重要；}
.r1.所选div、.r1.速率_btn_活动div{背景色：rgb（220,30,30）；}
.r2.所选div、.r2.速率_btn_活动div{背景色：rgb（200,50,30）；}
.r3.selected div.r3.rate_btn_active div{背景色：rgb（200200,30）；}
.r4.selected div.r4.rate_btn_active div{背景色：rgb（50200,30）；}
.r5.selected div、.r5.rate_btn_active div{背景色：rgb（30,220,30）；}

你能告诉我更好的方法是什么吗？@awoke知道如何给盒子添加不同的颜色吗？比如，第一个是红色，第二个是红色，第三个是黄色，第四个是黄色，第五个是绿色。@RaghavGarg好的，我编辑了你说的颜色。这只是css的变化。（并向html中的项目添加一个类）。如果你在和朋友一起工作，也许可以让他们对这个问题再投票几次：）点击后，在第二次悬停时，我希望它看起来和第一次一样。无不透明度。您的意思是，如果选择了5，但将鼠标悬停在第3个位置上，则在您悬停时，4和5看起来不会被选中？我会更新我的答案。是的，谢谢你的努力。我刚刚再次编辑了它，添加了内部div并更改了css，使它在鼠标进入框之间的空格时不会闪烁。我希望这对你有好处。