用到的知识点:

  E:checked:单选或复选框被选中 

  E ~ F: 选择后面的兄弟节点们:选择后面的兄弟节点

  E::after,E::before: 伪元素选择器 在匹配E的元素后面(前面)插入内容

css代码:  

.star-box{display:table;}
.star-box label{float:right;color:#999;}
.star-box label::after{content:'★';font-size:28px;padding:5px;display:inline-block;line-height:1;}
.star-box input:checked~label,
.star-box label:hover~label,
.star-box label:hover{color:red;}

html代码:

  <div class="star-box">
<input type="radio" name="star" id="star5" hidden/>
<label for="star5"></label> <input type="radio" name="star" id="star4" hidden/>
<label for="star4"></label> <input type="radio" name="star" id="star3" hidden/>
<label for="star3"></label> <input type="radio" name="star" id="star2" hidden/>
<label for="star2"></label> <input type="radio" name="star" id="star1" hidden/>
<label for="star1"></label>
</div>

效果图:

纯css实现评分的更多相关文章

  1. 纯CSS实现网站常用的五角星评分和分数展示交互效果

    最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...

  2. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  3. 使用纯 CSS 实现 Google Photos 照片列表布局

    文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...

  4. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  6. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  7. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  8. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  9. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. xilinx Vivado的使用详细介绍(2):创建工程、添加文件、综合、实现、管脚约束、产生比特流文件、烧写程序、硬件验证

    xilinx Vivado的使用详细介绍(2):创建工程.添加文件.综合.实现.管脚约束.产生比特流文件.烧写程序.硬件验证 Author:zhangxianhe 新建工程 打开Vivado软件,直接 ...

  2. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  3. 搜索引擎选择: Elasticsearch与Solr(转)

    搜索引擎选型调研文档 Elasticsearch简介* Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据. 它可以用于全文搜索,结构化搜索以及分 ...

  4. centos7配置consul

    下载wget https://releases.hashicorp.com/consul/1.4.2/consul_1.4.2_linux_amd64.zip解压unzip consul_1.4.2_ ...

  5. day_其他操作符的重载

    #include <iostream> #include <stdlib.h> using namespace std; class A{ public: A(void) { ...

  6. 内网环境使用ansible安装software 需要外网时,如何绑定代理呢

    内网环境使用ansible安装software 需要外网时,如何绑定代理呢? 方法一: 在ansible 的脚本里,yum install 的地方,添加语句: environment: https_p ...

  7. 用JavaScript比较两个数组是否相等

    JS怎么比较两个数组是否有完全相同的元素?Javascript不能直接用==或者===来判断两个数组是否相等,无论是相等还是全等都不行,以下两行JS代码都会返回false alert([0,0,0]= ...

  8. springboot访问数据库(MySql)

    1.使用JDBC访问数据库:JDBC是用于在Java语言编程中与数据库连接的API <dependency> <groupId>org.springframework.boot ...

  9. CORS在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

  10. 浙江省住房和城乡建设厅 http://www.zjjs.com.cn/ 漏洞提示

    http://220.189.211.52/zjjsgbxx/FileAttach/96dcdf11-c45e-4455-a443-f6dea8a44e23.html 可以下载,浏览 改修,