css活用，評分點選星星

kimingw發表於2017-08-03
CSS

1、字元圖集

2、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;}/*五角星點選後樣式*/

3、HTML

<ul class="cleanfloat">
      <li>★</li>
      <li>★</li>
      <li>★</li>
      <li>★</li>
      <li>★</li>
</ul>

4、JS

    $(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');
        })
    })

　　

相關文章