這個圖片是怎么搞的啊，老師兩張圖片怎么合的一張啊，我看老師只引用了一張啊，我也只插了一張
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星級評分</title>
<style>
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style-type:none;
/* 標(biāo)記樣式，調(diào)為無*/
}
.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;
/* 光標(biāo)樣式，手*/
}
</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="環(huán)境/jquery-3.4.1.min.js"></script>
<script>
var num = 2;
$item = $("#rating").find(".rating-item");
var lightOn = function(){
//找到$("#rating")下的find(".rating-item")進行循環(huán)遍歷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>
2019-12-18
我引用的是灰色星圖片，我還弄了張點亮的圖片，這個怎么弄的啊