star score
2015-10-31 15:04
218 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css" media="screen"> /*关键点:float: right -webkit-appearance: none :checked 选择符 同级元素选择符 ~*/ .demo{ float: left; } .demo input{ float: right; margin: 0; width: 44px; height: 44px; border: 0 none; outline: none; -webkit-appearance: none; /*remove default style*/ -webkit-tap-highlight-color: rgba(0,0,0,0); background: url(a.png) 0 -44px no-repeat; opacity: .3; transition: all 100ms linear; } .demo input:hover, .demo input:hover ~ input{ opacity: 1; } .demo input:checked, .demo input:checked ~ input{ background-position: 0 0; opacity: 1; } </style> </head> <body> <div class="demo"> <input type="radio" name="star" value="" placeholder=""> <input type="radio" name="star" value="" placeholder=""> <input type="radio" name="star" value="" placeholder=""> <input type="radio" name="star" value="" placeholder=""> <input type="radio" name="star" value="" placeholder=""> </div> </body> </html>
相关文章推荐
- ASO指南:App Store曝光位的吸量数据与获取方式
- Android——android studio 安装完成之后导入项目的乱码问题
- Android设计模式之单例模式(一)
- iWebShop 二次开发,创建自己的控制器,模型,视图
- javascript动态添加div
- 后台线程
- JavaScript学习笔记一
- JdbcTemplate查询数据 三种callback之间的区别
- uva 10820 欧拉函数
- MySQL优化--索引
- Linux_LVM&Quota
- 线程同步、线程同步跟Runnable的区别
- 新浪微博项目---首页技术点三.上拉刷新,下拉加载的实现(使用ios自带的小菊花实现)
- LightOJ 1005
- java多线程
- cuda
- APP间的调用
- 自定义异常的用法,抛出异常后,代码仍然继续执行。
- 进程、单线程和多线程
- 安全参透之旅第3章 Webshag工具