[唯一答案]laravel-admin中modal使用解析 | 瑷程序 Laravel-如何使用Redis | 瑷程序 福利!!!宝塔7.9免费安装所有插件! | 瑷程序 Laravel8-新建api无法访问,显示404/500 | 瑷程序 几行代码搞定,Navicat Premium 16永久免费使用 | 瑷程序 证书错误-cURL error 77: error setting certificate verify locations: CAfile: d:\cacert.pem CApath: none (see h | 瑷程序 Laravel项目执行composer报错Your github oauth token for github.com contains invalid characters | 瑷程序 clearInterval-你,真的理解了吗? | 瑷程序 Laravel-admin图片的存储,给前端的显示问题总结 | 瑷程序 laravel-admin部署到服务器报错This request has been blocked; the content must be served over HTTPS. | 瑷程序 命令行打开Apache,Mysql? | 瑷程序 laravel-Eloquen查询中的with和makeHidden | 瑷程序 评论不了 | 瑷程序 laravel-保存和显示多媒体 | 瑷程序 WordPress块主题-为什么修改主题文件没有效果? | 瑷程序 油猴脚本-自己写的脚本,处理百度搜索结果(直链) | 瑷程序 web前端面试笔试题记录 | 瑷程序 Thinkphp6-数据库操作入门 | 瑷程序 Thinkphp6-请求 | 瑷程序 Thinkphp6-常用标签语法 | 瑷程序 JavaScript-模拟点击鼠标右键 | 瑷程序 Thinkphp6-Auth用户扩展 | 瑷程序 php函数-wordwrap,sprintf,ucwords,ucfirst,substr_replace | 瑷程序 JavaScript-怎么获取DOM元素的位置? | 瑷程序 php函数-substr_count,substr_compare,substr,strtr | 瑷程序 php中的==和===运算符有什么不同? | 瑷程序 在win10中,如何修改新建文件/文件夹的默认名字? | 瑷程序 JavaScript-空值合并操作符”??”与可选链操作符”?.”,了解一下吧! | 瑷程序 PHP函数-zip函数 | 瑷程序 测试php脚本,你还在这样做吗? | 瑷程序 每天PHP函数-ignore_user_abort,highlight_string,highlight_file,get_browser | 瑷程序 每天PHP函数-exit,eval,define | 瑷程序 vue报错Failed to mount component: template or render function not defined. found in | 瑷程序 每天PHP函数-usleep,uniqid,time_sleep_until,time_nanosleep,show_source | 瑷程序 array_walk()与array_map() | 瑷程序 Electron-vue-Electron Security Warning (Insecure Content-Security-Policy) 告警解决 | 瑷程序 Laravel-Validator自定义验证规则 | 瑷程序 仿微信消息列表的时间显示方式 | 瑷程序 laravel的storeAs等问题导致出现Filename cannot be empty | 瑷程序 js中的for和while的区别 | 瑷程序 fetch使用记录 | 瑷程序 使用laravel+Workerman做websocket | 瑷程序 怎么申请QQ互联登录接口? | 瑷程序 electron14中无法使用remote-解决办法 | 瑷程序 TypeScript-学习记录 | 瑷程序 如何为你的网站植入广告,赚取收益呢!GoogleAdsense首选!! | 瑷程序 数据结构-二叉树的遍历 | 瑷程序 React-JSX语法规则 | 瑷程序 React-生命周期与其他,diffing算法的理解 | 瑷程序 React-注意事项-记录学习过程 | 瑷程序 Webpack-创建项目1 | 瑷程序 数据结构-哈夫曼树 | 瑷程序 文件存在路径没错却总是获取不到-vue部署iis服务器 | 瑷程序 使用IntersectionObserver实现图片懒加载 | 瑷程序 php菜狗学习过滤器基础 | 瑷程序 Javascript-unicode字符的相互转换 | 瑷程序 vuerouter在history mode下刷新页面显示Cannot GET | 瑷程序 vuecli3项目怎么修改title[动态改变] | 瑷程序 uniapp-如何实现自动滑动到顶部,或其他位置 | 瑷程序 使用Jquery+HTML写星星评分,jquery Html | 瑷程序 JavaScript-apply和call的理解 | 瑷程序 数据结构-二分查找,分别用递归与非递归实现 | 瑷程序 Threejs-描绘线段 | 瑷程序 fs-文件操作 | 瑷程序 Threejs-阴影的添加和平面的创建 | 瑷程序 创建http服务 | 瑷程序 Threejs-创建旋转正方体 | 瑷程序 inquirer-命令交互模块 | 瑷程序 Hbuilder打开uniapp运行到小程序模拟器时没有命令,运行不了 | 瑷程序 vue-admin-beautiful之自定义api,获取假数据 | 瑷程序 自己开发谷歌浏览器插件-问题集锦 | 瑷程序 远程桌面报”内部错误”,最终解决办法! | 瑷程序 HbuilderX从Git导入项目之从码云导入项目 | 瑷程序

瑷程序

RorinL

https://www.rfbynet.club

导航

用Jquery+HTML写星星评分

类似于实现这样:

 

 -----

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>星星评分</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
        <!--引入jquery-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div class="box clear">
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="txt">非常好</div>
</div>
</body>
</html>    

--

index.js:

$(function(){
//定义一个arr数组,值为:"非常差",'差',"一般","满意","非常满意"
    var arr=["非常差",'差',"一般","满意","非常满意"];
//鼠标经过
    $('.list').mouseover(function(){
        $(this).nextAll().find(".star1").css("z-index","0");//每次移动进去后,先让next所有同辈元素都是灰色星星
        $(this).find(".star1").css("z-index",1);//让移上去的哪个自己是黄色星星
        
        $(this).prevAll().find(".star1").css("z-index",1);//让移上去哪个星星的前面的所有同辈元素都是黄色星星
        $(".txt").text(arr[$('.box').find(".list").index($(this))]);//通过父元素,获得当前元素在父元素中的index
    })
})

来源:

我的个人网站

文章在我网站的链接:https://www.rfbynet.club/archives/79.html

posted on 2020-11-29 14:22  RorinL  阅读(195)  评论(0编辑  收藏  举报

瑷程序 - 总结总结,分享分享
[唯一答案]laravel-admin中modal使用解析 | 瑷程序 Laravel-如何使用Redis | 瑷程序 福利!!!宝塔7.9免费安装所有插件! | 瑷程序 Laravel8-新建api无法访问,显示404/500 | 瑷程序 几行代码搞定,Navicat Premium 16永久免费使用 | 瑷程序 证书错误-cURL error 77: error setting certificate verify locations: CAfile: d:\cacert.pem CApath: none (see h | 瑷程序 Laravel项目执行composer报错Your github oauth token for github.com contains invalid characters | 瑷程序 clearInterval-你,真的理解了吗? | 瑷程序 Laravel-admin图片的存储,给前端的显示问题总结 | 瑷程序 laravel-admin部署到服务器报错This request has been blocked; the content must be served over HTTPS. | 瑷程序 命令行打开Apache,Mysql? | 瑷程序 laravel-Eloquen查询中的with和makeHidden | 瑷程序 评论不了 | 瑷程序 laravel-保存和显示多媒体 | 瑷程序 WordPress块主题-为什么修改主题文件没有效果? | 瑷程序 油猴脚本-自己写的脚本,处理百度搜索结果(直链) | 瑷程序 web前端面试笔试题记录 | 瑷程序 Thinkphp6-数据库操作入门 | 瑷程序 Thinkphp6-请求 | 瑷程序 Thinkphp6-常用标签语法 | 瑷程序 JavaScript-模拟点击鼠标右键 | 瑷程序 Thinkphp6-Auth用户扩展 | 瑷程序 php函数-wordwrap,sprintf,ucwords,ucfirst,substr_replace | 瑷程序 JavaScript-怎么获取DOM元素的位置? | 瑷程序 php函数-substr_count,substr_compare,substr,strtr | 瑷程序 php中的==和===运算符有什么不同? | 瑷程序 在win10中,如何修改新建文件/文件夹的默认名字? | 瑷程序 JavaScript-空值合并操作符”??”与可选链操作符”?.”,了解一下吧! | 瑷程序 PHP函数-zip函数 | 瑷程序 测试php脚本,你还在这样做吗? | 瑷程序 每天PHP函数-ignore_user_abort,highlight_string,highlight_file,get_browser | 瑷程序 每天PHP函数-exit,eval,define | 瑷程序 vue报错Failed to mount component: template or render function not defined. found in | 瑷程序 每天PHP函数-usleep,uniqid,time_sleep_until,time_nanosleep,show_source | 瑷程序 array_walk()与array_map() | 瑷程序 Electron-vue-Electron Security Warning (Insecure Content-Security-Policy) 告警解决 | 瑷程序 Laravel-Validator自定义验证规则 | 瑷程序 仿微信消息列表的时间显示方式 | 瑷程序 laravel的storeAs等问题导致出现Filename cannot be empty | 瑷程序 js中的for和while的区别 | 瑷程序 fetch使用记录 | 瑷程序 使用laravel+Workerman做websocket | 瑷程序 怎么申请QQ互联登录接口? | 瑷程序 electron14中无法使用remote-解决办法 | 瑷程序 TypeScript-学习记录 | 瑷程序 如何为你的网站植入广告,赚取收益呢!GoogleAdsense首选!! | 瑷程序 数据结构-二叉树的遍历 | 瑷程序 React-JSX语法规则 | 瑷程序 React-生命周期与其他,diffing算法的理解 | 瑷程序 React-注意事项-记录学习过程 | 瑷程序 Webpack-创建项目1 | 瑷程序 数据结构-哈夫曼树 | 瑷程序 文件存在路径没错却总是获取不到-vue部署iis服务器 | 瑷程序 使用IntersectionObserver实现图片懒加载 | 瑷程序 php菜狗学习过滤器基础 | 瑷程序 Javascript-unicode字符的相互转换 | 瑷程序 vuerouter在history mode下刷新页面显示Cannot GET | 瑷程序 vuecli3项目怎么修改title[动态改变] | 瑷程序 uniapp-如何实现自动滑动到顶部,或其他位置 | 瑷程序 使用Jquery+HTML写星星评分,jquery Html | 瑷程序 JavaScript-apply和call的理解 | 瑷程序 数据结构-二分查找,分别用递归与非递归实现 | 瑷程序 Threejs-描绘线段 | 瑷程序 fs-文件操作 | 瑷程序 Threejs-阴影的添加和平面的创建 | 瑷程序 创建http服务 | 瑷程序 Threejs-创建旋转正方体 | 瑷程序 inquirer-命令交互模块 | 瑷程序 Hbuilder打开uniapp运行到小程序模拟器时没有命令,运行不了 | 瑷程序 vue-admin-beautiful之自定义api,获取假数据 | 瑷程序 自己开发谷歌浏览器插件-问题集锦 | 瑷程序 远程桌面报”内部错误”,最终解决办法! | 瑷程序 HbuilderX从Git导入项目之从码云导入项目 | 瑷程序