簡單實現大方接地氣的五角星評分

1.前言 
如何在頁面中實現五角星評分呢？鼠標放上去有動態效果並可以點擊。來來來，demo走起來！ 
2.詳情 
1.css樣式

.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;}

 

2.html內容

<ul class="cleanfloat">
      <li>&#9733;</li>
       <li>&#9733;</li>
       <li>&#9733;</li>
       <li>&#9733;</li>
       <li>&#9733;</li>
   </ul>

3.js代碼

<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>

4.展示效果 

3.總結 
是不是超級簡單，你也可以試試哦！