javascript 星星点灯

<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
#star{
width: 800px;
margin: 50px auto;
}
#star p{
float: left;
}
.ss{
float: left;
}
.ss li{
position: relative;
float: left;
width:20px;
height: 20px;
line-height: 20px;
background: url(img/star.png) top center no-repeat;
background-position: 0 0;
}
/*.ss li:hover{
float: left;
width:20px;
height: 20px;
line-height: 20px;
background: url('img\star.png') top center no-repeat;
background-position: 0 -29px;
}*/
li.active{
background-position: 0 -29px;
}
.ss li p{
position: absolute;
top: 25px;
left:-85px;
//图片路径;
background: url(img/stat.png) no-repeat;
width: 200px;
height: 150px;

line-height: 1.2;
padding: 10px;
font-size: 12px;
color:#666;
display: none;
}

.st{
float: left;
}
.tt{
float: left;
font-size: 12px;
}
</style>

<div id="star">
<p>点击星星就能打分</p>
<ul class="ss">
<li>
<p>
<span style="color:red">1分 很不满意！</span><br>
(差的太离谱，与卖家描述<br>严重不符，非常不满意！！)</p>
</li>
<li>
<p>
<span style="color:red">2分 不满意！</span><br>
(部分有破损，与卖家描述<br>不符，不满意！！)
</p>
</li>
<li>
<p>
<span style="color:red">3分 一般！</span><br>
(质量一般，没有买家描述的<br>那么好！！)
</p>
</li>
<li>
<p>
<span style="color:red">4分 满意！</span><br>
(差的太离谱，与卖家描述严重<br>不符，非常不满意！！)
</p>
</li>
<li>
<p>
<span style="color:red">5分 很满意！</span><br>
(质量非常好，与卖家描述一致<br>，非常满意！！)
</p>
</li>
</ul>

<p class="tt"> </p>
</div>

<script>
var arrTxt = ['<span style="color:red;">1分</span>(差的太离谱，与卖家描述严重不符，非常不满意！！)',
'<span style="color:red;">2分</span>(部分有破损，与卖家描述不符，不满意！！)' ,
'<span style="color:red;">3分</span>(质量一般，没有买家描述的那么好！！)',
'<span style="color:red;">4分</span>(质量不错，与卖家描述的基本一致，还是挺满意的！！)',
'<span style="color:red;">5分</span>(质量非常好，与卖家描述一致，非常满意！！)'
]
var oss = document.getElementsByClassName('ss')[0];
var ali1 = oss.getElementsByTagName('li');
var aP = oss.getElementsByTagName('p');

var oT = document.getElementsByClassName('tt')[0];
//鼠标悬浮星星上面 点亮星星
for(var i=0;i<ali1.length;i++){
ali1[i].index = i ;
var that =this.index
ali1[i].onmouseover = function(){
this.className = 'active';
aP[this.index].style.display = 'block';
// alert(i);
for(var j=0;j<this.index;j++){
ali1[j].className = 'active';
}
}
ali1[i].onmouseout = function(){
this.className = ''
aP[this.index].style.display ='none';
// alert(i)
}
ali1[i].onclick =function(){
oT.innerHTML = arrTxt[this.index];
for(var j=0;j<this.index;j++){
ali1[j].className = 'active';
}
this.onmouseout =null;
aP[this.index].style.display ='none';
}
}                                                
document.onclick =function(){
for(var j=0;j<ali1.length;j++){
ali1[j].onmouseover =null;
ali1[j].onmouseout = null;
ali1[j].onclick = null;

}
}
</script>