截图：（如果你想换成星星，直接修改样式就可以了，提示的描述跟分数都是在插件里设置）
demo:猛击这里
代码有多简单就不说了，本来是找的插件，最后发现一个一个筛选也没找着符合需求的，还是自己硬着头皮动手。写得比较糙，结构上可能不是特别灵活，样式都在demo里
/***
aLi: 设置星星或等级的对象
aMsg: 设置提示描述
hinText: 设置显示描述的对象
val: 设置分数
valContent: 设置获取分数或结果的对象
调用方法：
$('.num-rate').rating({
aLi: '.num-rate li',
oUl:'.num-rate ul',
hintText: '.num-rate span',
valContent: '.num-rate input'
})
***/
(function ($, rating) { $.fn[rating] = function(options){ var opt = $.extend({ aLi: '', aMsg: ["很不好","不太如意","还不错","好","很好"], hintText: '', val: ["1","2","3","4","5"], valContent: '' }, options || {}); var _index; //在click后记录索引值 return this.each(function(){ var i = iScore = iStar = 0; $(opt.aLi) .mouseover(function(){ var index = $(this).index(); //初始化背景色 $(opt.aLi).removeClass('onVal') //鼠标移上去时的效果 for(i=0; i<=index; i++){ $(opt.aLi).eq(i).addClass('on'); $(opt.hintText).html(opt.aMsg[index]); } }) .mouseout(function(){ var index = $(this).index(); //鼠标离开的效果 for(i=0; i<=index; i++){ $(opt.aLi).eq(i).removeClass('on'); $(opt.hintText).html(''); } //恢复上次的选择结果 save(_index) }) .click(function(){ _index = $(this).index(); $(opt.aLi).removeClass('onVal'); save(_index) }) //保存选择的结果 function save(_index){ $(opt.hintText).html(opt.aMsg[_index]); //显示提示文字 $(opt.valContent).val(opt.val[_index]); //获取分数 for(i=0; i<=_index; i++){ $(opt.aLi).eq(i).addClass('onVal') } } }) }; })(jQuery, 'rating');
html和css：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin:0;padding:0}
li{list-style:none}
.num-rate{font-size:12px;200px;margin:60px auto}
.num-rate li{float: left; 27px; height: 18px;border:1px solid #eaeaea;text-align: center;line-height: 18px;cursor: pointer;}
.num-rate li a{color: #999999;display: block;}
.num-rate li a:hover{text-decoration: none;}
.num-rate li.onVal, .num-rate li.on{background: #ff870c;border-color: #ff870c}
.num-rate li.onVal a, .num-rate li.on a{color:#fff;}
.num-rate .hint{float: left;padding-top: 2px;color: #f60}
</style>
</head>
<body>
<div class="num-rate clearfix">
<ul class="clearfix">
<li><a href="javascript:;" title="很不好">1</a></li>
<li><a href="javascript:;" title="不太如意">2</a></li>
<li><a href="javascript:;" title="还不错">3</a></li>
<li><a href="javascript:;" title="好">4</a></li>
<li><a href="javascript:;" title="很好">5</a></li>
</ul>
<span class="hint"></span>
<input type="hidden" name="likegrade" value="">
</div>
</body>
</html>