今天小编跟大家讲解下有关css3模拟jq点击事件的实例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3模拟jq点击事件的实例代码 的相关资料，希望小伙伴们看了有所帮助。
今天是一个css3模拟jq点击事件 因为我发现 css3中没有类似于 js的点击事件 那么 可不可以仿照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="单选" id="a1" /> <a href="#">css</a> <input type="radio" name="单选" id="a2" /> <a href="#">html</a> <input type="radio" name="单选" id="a3" /> <a href="#">javascript</a> </div> </body></html>以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
