jQuery带文字评论的动态星星评分效果代码

一款jQuery带文字评论的动态星星评分效果代码，鼠标悬停在星星上面时，除了有对应的分值信息外，下面还会有多个文字评论内容供选择，整体效果还时挺不错的，喜欢的童鞋请收下吧。

分类：导航菜单 > 图标导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入CSS样式文件、jQuery库和script.js插件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

页面的body部分，div容器里放入ul和多个li标签，代码如下：

<!--代码开始-->
<div class="xzw_starSys">
	<div class="xzw_starBox">
		<ul class="star stars">
			<li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
			<li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
			<li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
			<li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
			<li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
		</ul>
		<div class="current-rating showb"></div>
	</div>
	<!--评价文字-->
	<div class="description"></div>
	<!--评价选项-->
	<div class="option">
	  <ul class="option-con clearfix">
	  	<li><a href="">全是乱码</a></li>
	  	<li><a href="">标题和内容不符</a></li>
	  	<li><a href="">答案很多错误</a></li>
	  	<li><a href="">没有配图</a></li>
	  	<li><a href="">没有答案</a></li>
	  </ul>
	  <ul class="option-con clearfix" style="display:none">
	  	<li><a href="">扫描版有些模糊</a></li>
	  	<li><a href="">图片不清晰</a></li>
	  	<li><a href="">答案不完整</a></li>
	  	<li><a href="">没有解析</a></li>
	  	<li><a href="">教材版本不符</a></li>
	  </ul>
	  <ul class="option-con clearfix" style="display:none">
	  	<li><a href="">凑活能用</a></li>
	  	<li><a href="">重复率高</a></li>
	  	<li><a href="">没有排版</a></li>
	  	<li><a href="">解析有错误</a></li>
	  	<li><a href="">资料不够丰富</a></li>
	  </ul>
	  <ul class="option-con clearfix" style="display:none">
	  	<li><a href="">不太需要编辑</a></li>
	  	<li><a href="">资料有深度</a></li>
	  	<li><a href="">资料有创新</a></li>
	  	<li><a href="">还不错呦</a></li>
	  	<li><a href="">资料很合适</a></li>
	  </ul>
	  <ul class="option-con clearfix" style="display:none">
	  	<li><a href="">完美！</a></li>
	  	<li><a href="">拿来就能用</a></li>
	  	<li><a href="">精心制作</a></li>
	  	<li><a href="">解析非常好</a></li>
	  	<li><a href="">编排精美</a></li>
	  </ul>
	</div>
	<div class="prompt">请为资料打星</div>
 </div>
<!--代码结束-->