导读：纯css简单实现五角星评分，再也不需要使用图片来代替了，非常的简单方便。效果图如下：<style>.cleanfloat::after{display:block;clear:bot...
纯css简单实现五角星评分，再也不需要使用图片来代替了，非常的简单方便。效果图如下：
- <style>
- .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}
- ul li{list-style:none; float:left; font-size:30px; margin:5px; color:#ccc; cursor:pointer;}
- .hs,.cs{color:#f00;}
- </style>
- <script type="text/javascript" src="http://www.bcty365.com/statics/js/bcty365_js/jquery.min.js"></script>
- <ul class="cleanfloat">
- <li>★</li>
- <li>★</li>
- <li>★</li>
- <li>★</li>
- <li>★</li>
- </ul>
- <script>
- $(function () {
- $("ul li").hover(function(){
- $(this).addClass('hs');
- $(this).prevAll().addClass('hs');
- },function(){
- $(this).removeClass('hs');
- $(this).prevAll().removeClass('hs');
- })
-
- $("ul li").click(function () {
- $(this).addClass('cs');
- $(this).prevAll().addClass('cs');
- $(this).nextAll().removeClass('cs');
- })
- })
- </script>
