css3模拟jq点击事件
2017-01-22 18:56
387 查看
还是这个梗,收好冷。今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照
jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签,让radio覆盖在a上,那为什么不直接
把 a放在radio上面呢?因为选择器 + 好选择嘛,用radio的功能,a来修饰按钮样式,再把radio 隐藏,这里要用opacity(透明度)
这就是,主要原理!
上视图吧
jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签,让radio覆盖在a上,那为什么不直接
把 a放在radio上面呢?因为选择器 + 好选择嘛,用radio的功能,a来修饰按钮样式,再把radio 隐藏,这里要用opacity(透明度)
这就是,主要原理!
上视图吧
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; text-decoration: none; } .fd{ width: 100%; height: 100px; margin-top: 200px; position: fixed; } input,a{ width: 33.33%; height: 100px; position: absolute; font-size: 30px; font-weight: 700; cursor:pointer; } a{ display: block; color: #000; text-align: center; line-height: 100px; z-index: 10;/*要覆盖嘛,当然需要层级关系*/ border-radius: 20px; } input{ z-index: 100;/*要覆盖嘛,当然需要层级关系*/ opacity:0; } input:checked + a{ background: rgba(0,0,0,0.5); } #a1,#a1+a{ left: 0%; } #a2,#a2+a{ left: 33.33%; } #a3,#a3+a{ left: 66.66%; } </style> </head> <body> <!--单选按钮的时候,name要统一 原理就是,把input覆盖在a上,然后再把input透明度为0隐藏; 然后,按钮的样式由a标签来控制。input上,a下,是因为; 选择器 + 容易选到。 --> <div class="fd"> <input type="radio" name="单选" /> <a href="#">css</a> <input type="radio" name="单选" /> <a href="#">html</a> <input type="radio" name="单选" /> <a href="#">javascript</a> </div> </body> </html>
相关文章推荐
- css3模拟jq点击事件
- css3模拟jq点击事件
- css3模拟jq点击事件
- js/jq模拟点击事件
- Java模拟Android View OnClickListener点击事件
- Android adb 模拟滑动 按键 点击事件
- 模拟Android点击事件的趣事
- 模拟鼠标点击事件
- SDL使用触屏模拟鼠标点击事件
- CSS3 修改和去除移动端点击事件出现的背景框 (tap-highlight-color)
- Libgdx---模拟点击事件(代码点击事件)
- js模拟点击事件实现代码
- Android adb 模拟滑动 按键 点击事件
- Vue填坑之旅2-模拟点击事件
- Jquery页面中模拟回车点击事件
- Android通过代码模拟物理、屏幕点击事件
- 模拟手指点击滑动事件
- Android 代码模拟ListView item的点击事件并且改变背景颜色(笔记)
- 使用Java自动化方法模拟Android手机点击、触屏事件
- Android 跨进程事件处理(一)——模拟点击、全局截屏