<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星级评分</title>
<style>
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style-type:none;
/* 标记样式，调为无*/
}
.rating{
width:130px;
height: 26px;
margin: 100px,auto;
}
.rating-item{
float: left;
width: 26px;
height: 26px;
background: url("photo/454927978387472502.jpg") no-repeat;
cursor: pointer;
/* 光标样式，手*/
}
</style>
</head>
<body>
<ul class="rating" id="rating">
<li class="rating-item" title="差"></li>
<li class="rating-item" title="较差"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="较好"></li>
<li class="rating-item" title="好"></li>
</ul>
<script src="环境/jquery-3.4.1.min.js"></script>
<script>
var num = 2;
$item = $("#rating").find(".rating-item");
var lightOn = function(){
//找到$("#rating")下的find(".rating-item")进行循环遍历each
$item.each(function(index){
if(index<num){
$(this).css("backgroun-position","0-26px")
}
else{
$(this).css("backgroun-position","0-26px")
}
});
}
lightOn(num);
//mouseenter移入，mouseleave移出
//开始绑定事件
$item.on("mouseenter",function(){
lightOn($(this).index()+1);
}).on("click",function(){
num = lightOn($(this).index()+1);
});
$("#rating").on("mouseleave",function(){
lightOn(num);
});
}
</script>
</body>
</html>
我引用的是灰色星图片，我还弄了张点亮的图片，这个怎么弄的啊