<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div,ul,li{margin:0;padding:0}
ul,li{list-style:none}
.comment p{border:1px solid #ccc;width:100px;clear:both;text-align:center;display:none}
.comment li{float:left;width:22px;height:21px;background:url(sprite.png) no-repeat -24px 0;}
.comment li.active{background:url(sprite.png) no-repeat}
</style>
<script>
window.onload=function(){
var odiv = document.getElementById('comment');
var oli = odiv.getElementsByTagName('li');
var op = odiv.getElementsByTagName('p')[0];
var atemp =['很差','比较差','一般','挺好','非常好']
//alert('test')
for(var i =0;i< oli.length;i++){
oli[i].index = i
oli[i].onmouseover = function(){
for(i=0;i<=this.index;i++){
oli[i].className = 'active'
}
op.style.display ='block';
op.innerHTML =atemp[this.index]
}
oli[i].onmouseout = function(){
for(i=0;i<=this.index;i++){
oli[i].className = ''
}
op.style.display ='none';
}
oli[i].onclick = function(){
alert('您已评了'+(this.index+1)+'分')
}
}
}
</script>
</head>
<body>
<div id="comment" class="comment">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>推荐</p>
</div>
</body>
</html>
