jquery实现五星好评

约定不等于承诺〃 2022-09-14 09:07 151阅读 0赞

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

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_14_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_16_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ce6c76a29e6b4770ad116448bff0a40e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/7cbddcab254943a79650182f5acdd667.png

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue封装五星好评

![在这里插入图片描述][20210103103532825.png] 图标下载： ![在这里插入图片描述][20210115094400842.png] ![在这里

客官°小女子只卖身不卖艺/ 2023年01月01日 13:56/ 0 赞/ 179 阅读

相关一个获五星好评的外汇极简交易策略！

来源：汇商琅琊榜原文连接：[https://mp.weixin.qq.com/s/tVLZhzomynxIX97m1aQycg][https_mp.weixin.qq.c

た入场券/ 2022年11月18日 13:57/ 0 赞/ 281 阅读

相关 jquery实现五星好评

css: <style> ul > li > i.iconfont{ font-size: 20px;

约定不等于承诺〃/ 2022年09月14日 09:07/ 0 赞/ 152 阅读

相关历届试题五星填数

如【图1.png】的五星图案节点填上数字：1~12，除去7和11。要求每条直线上数字和相等。 [![图1][1]][1_1] 如图就是恰当的填法。请你利用计算机搜

Dear 丶/ 2022年07月12日 10:49/ 0 赞/ 176 阅读

相关 jQuery五星好评界面反馈界面

![Center][] 星星：![Center 1][]![Center 2][]![Center 3][] jQuery五星好评界面反馈界面

忘是亡心i/ 2022年06月12日 01:43/ 0 赞/ 204 阅读

相关用JavaScript制作五星好评

用JavaScript制作五星好评开发工具与关键技术：JavaScript 作者：陈希雄撰写时间：2019/1/19 大家好！我今天要给大家分享

男娘i/ 2022年03月25日 08:09/ 0 赞/ 290 阅读

相关 jQuery进阶上集--通过案例(五星好评、轮播图、递归实现动画、全选与反选...)深入知识点

jQuery是不是过了保质期了现在前端三大框架，都是为了使操作者从繁琐的DOM操作中解脱出来。而现在都是面向数据编程，这样可以提高了性能和便于维护；而dom操作会让页面

你的名字/ 2022年01月30日 11:57/ 0 赞/ 193 阅读

相关 uni-app 评论五星

下载组件 uni-rate 在script中引入： import uniRate from "@/components/uni-rate/un

我就是我/ 2021年11月10日 07:26/ 0 赞/ 458 阅读

相关 JavaScript实现商品评价五星好评

一.效果展示 ![在这里插入图片描述][20190818170216603.gif] 二.代码实现 1.html代码 <!DOCTYPE html>

亦凉/ 2021年10月30日 00:30/ 0 赞/ 292 阅读

相关重构-五星评分

动画: 移入到某个星星位置,之前的星星高亮变大,后面的星星暗色不变实现: 动画: (1)通过一个索引,索引值为-1,每

柔情只为你懂/ 2021年07月24日 21:11/ 0 赞/ 412 阅读