jq控制css样式(css3模拟jq点击事件的实例代码)
类别:Web前端 浏览量:1025
时间:2022-01-22 01:58:04 jq控制css样式
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下,是因为; 选择器 + 容易选到。 --> <li 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> </li> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- jq控制css样式(css3模拟jq点击事件的实例代码)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- a标签添加点击事件的几种方式
- layui触碰提示框(layui禁用侧边导航栏点击事件的处理方法)
- 你还没有升职吗 他竟因为几套激励理论,升职了(你还没有升职吗)
- 某知名企业绩效管理体系及薪酬分配体系操作手册(某知名企业绩效管理体系及薪酬分配体系操作手册)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)
- 华为 联想等46家公司笔试面试题,涉及各行各业,建议收藏(联想等46家公司笔试面试题)
- ()
- ()
热门推荐
- laravel框架详解(laravel 5.3 单用户登录简单实现方法)
- 云服务器定时重启(云服务器无法正常关机/重启的几种原因)
- docker容器启动执行多条命令(详解Shell脚本控制docker容器启动顺序)
- php私有函数怎么调(php intval函数用法总结)
- 云服务器9兆带宽的上传速度是多少(云服务器网速多少怎么计算?云服务器的1兆带宽是多少的?)
- bootstraptable使用教程(bootstrap Table的使用方法总结)
- 阿里云数据库高可用方案(阿里云服务器ECS安装MariaDB后无法远程连接数据库的解决方法)
- 网站页面常用的尺寸
- dedecms提示怎么去除(DEDECMS实现禁止游客发表评论)
- python函数基本使用(Python3中exp函数用法分析)