jquery实现五星好评

css:

   <style>
        ul > li > i.iconfont{
            font-size: 20px;
            color: #ccc;
        }
        ul > li > i.active{
            color: gold;
        }
    </style>
   <link rel="stylesheet" href="https://at.alicdn.com/t/font_2796635_har0w4yay8w.css">

html:

  <ul>
        <li>
            <i class="iconfont icon-star"></i><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i>
        </li>
        <li>
            <i class="iconfont icon-star"></i><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i>
        </li>
        <li>
            <i class="iconfont icon-star"></i><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i>
        </li>
    </ul>

javascript：

//jquery官网：https://www.bootcdn.cn/jquery/
<script src="./js/jquery.js"></script>
    <script>
        $('li i').mouseenter(function () { 
            $(this).addClass('active').prevAll().addClass('active');
            $(this).nextAll().removeClass('active');
         })
    </script>

效果：

 

 

 

标签：jquery,五星,ul,color,li,好评,active,addClass
来源： https://blog.csdn.net/qq_48294048/article/details/120586913