<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>评分</title> <style type="text/css"> *{margin:0;padding:0px;} ul,li{list-style-type: none;} #content{width:405px;height: 81px;margin:10px auto;background: #584646;border:1px solid #C75A5A;padding: 10px;} #content ul{width:405px;height: 81px;} .active{background: url(bj_xing.png) no-repeat bottom left !important;} #content ul li{width:81px;height:81px;float:left;background: url(bj_xing.png) no-repeat top left;} #content ul:after{clear: both;} p{width:150px;height:30px;margin:0 auto;text-align: center;line-height: 30px;border:1px solid #C75A5A;display: none;} </style> <script type="text/javascript"> var aDate=[‘很差‘,‘较差‘,‘一般‘,‘推荐‘,‘力荐‘]; window.onload=function(){ var oDiv=document.getElementById(‘content‘); var aLi=oDiv.getElementsByTagName(‘li‘); var oP=document.getElementsByTagName(‘p‘)[0]; var i=0; for(i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onmouseover=function(){ oP.style.display=‘block‘; oP.innerHTML=aDate[this.index]; for(i=0;i<=this.index;i++){ aLi[i].className=‘active‘; } } aLi[i].onmouseout=function(){ oP.style.display=‘none‘; for(i=0;i<aLi.length;i++){ aLi[i].className=‘‘; } } aLi[i].onclick=function(){ alert(‘评分成功,‘+(this.index+1)+‘分‘); } } } </script> </head> <body> <div id="content"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <p>一般</p> </body> </html>
原文：http://www.cnblogs.com/Mr-W/p/6305878.html