找到了一个jquery做的
<!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>jQuery实现星级评分效果 - heluyao's Blog-download by http://www.jb51.net</title>
<style type="text/css">
* { margin:0; padding:0;}
ul { list-style:none;}
body { font-size:12px; line-height:18px; color:#404040; text-align:center;}
.clearfix:after {
display:block;
clear:both;
height:0;
font-size:0;
content:"."; color:#fff;
}
.clearfix { min-height:1%; clear:both;}
*html .clearfix { height:1%;}
h1 { line-height:30px; font-size:14px; text-align:center; margin:50px auto 0; width:800px; color:#404040;}
.info { margin-bottom:20px; color:#999;}
.right {width:540px; text-align:right; margin:10px auto 0 auto;}
.tips { line-height:24px; margin:10px auto 0 auto; width:530px; border:1px solid #dcdddd; background-color:#fffceb; padding:5px; color:#666;}
/* 星级评分css */
.selectStar { width:500px; margin:0 auto; border:1px solid #ddd; padding:20px;}
.selectStar li { float:left; text-align:left; _display:inline; margin-right:8px; padding:0 5px; line-height:20px;}
.selectStar li span.red { color:#d00; width:10px;}
.selectStar li span.zi {}
.selectStar li em { border:3px solid #f6b88e; height:24px; width:75px; display:block; background:url(dpForm_1_0_0.gif) no-repeat 8px 6px; padding:0 8px;}
.selectStar li em.selectS1 { background-position:8px -14px;}
.selectStar li em.selectS2 { background-position:8px -34px;}
.selectStar li em.selectS3 { background-position:8px -54px;}
.selectStar li em.selectS4 { background-position:8px -74px;}
.selectStar li em.selectS5 { background-position:8px -94px;}
.selectStar li em a { text-indent:-999em; overflow:hidden; display:block; float:left; width:14px;}
.dpCont { color:#f60;}
</style>
</head>
<body>
<h1>基于jQuery实现星级评分效果</h1>
<p class="info"><a href="http://www.11gz.com/" title="heluyao's Blog">heluyao's Blog</a></p>
<div class="selectStar clearfix">
<ul class="clearfix">
<li><span class="red">*</span><span class="zi">服务 </span><span id="dpCont1" class="dpCont"></span>
<em id="dpStar1" class="">
<a href="#" id="1">1</a>
<a href="#" id="2">2</a>
<a href="#" id="3">3</a>
<a href="#" id="4">4</a>
<a href="#" id="5">5</a>
</em>
</li>
<input id="dpStar1Hide" type="hidden" value="" />
<li><span class="red">*</span><span class="zi">质量 </span><span id="dpCont2" class="dpCont"></span>
<em id="dpStar2" class="">
<a href="#" id="1">1</a>
<a href="#" id="2">2</a>
<a href="#" id="3">3</a>
<a href="#" id="4">4</a>
<a href="#" id="5">5</a>
</em>
</li>
<li><span class="red">*</span><span class="zi">性价比 </span><span id="dpCont3" class="dpCont"></span>
<em id="dpStar3" class="">
<a href="#" id="1">1</a>
<a href="#" id="2">2</a>
<a href="#" id="3">3</a>
<a href="#" id="4">4</a>
<a href="#" id="5">5</a>
</em>
</li>
</ul>
</div>
<div class="tips">本代码性能方面仍有一定提升空间，只是闲来无聊练手之作。</div>
<div class="right"><a href="javascript:window.history.back(-1); ">返回上一页 »</a></div>
<script src="jquery-1.1.3.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var className;
var classID;
var dpText="";
var dpTextC="";
$(".selectStar em a").bind("click",function(){
className = "selectS" + $(this).attr("id");
classID = $(this).parent().attr("id");
$(this).parent().removeClass().addClass(className);
if($(this).attr("id") == 1 || $(this).attr("id") == 2) {dpTextC = "差评";}
if($(this).attr("id") == 3 || $(this).attr("id") == 4) {dpTextC = "中评";}
if($(this).attr("id") == 5) {dpTextC = "好评";}
$(this).parent().prev(".dpCont").text(dpTextC);
return false;
})
.bind("mouseover",function(){
if($(this).attr("id") == 1 || $(this).attr("id") == 2) {dpText = "差评";}
if($(this).attr("id") == 3 || $(this).attr("id") == 4) {dpText = "中评";}
if($(this).attr("id") == 5) {dpText = "好评";}
$(this).parent().removeClass().addClass("selectS" + $(this).attr("id"));
$(this).parent().prev(".dpCont").text(dpText);
})
.bind("mouseout",function(){
$(this).parent().removeClass("selectS" + $(this).attr("id"));
if($(this).parent().attr("id") == classID){
$(this).parent().addClass(className);
}
$(this).parent().prev(".dpCont").text(dpTextC);
});
});
</script>
<p> </p>
<table width="728" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="136" align="center"><p>代码整理：<a href="http://www.jb51.net/" target="_blank">脚本之家</a> </p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p><p>脚本之家整理。</p></p>
<p><script src="/js/js-preview-728x90.js"></script><br /><br /><br /><center><script src="/js/tj.js"></script></center></p></td>
</tr>
</table>
</body>
</html>
