css3模拟jq点击事件的实例代码


Posted in HTML / CSS onJuly 06, 2017

今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签,让radio覆盖在a上,那为什么不直接把 a放在radio上面呢?因为选择器 + 好选择嘛,用radio的功能,a来修饰按钮样式,再把radio 隐藏,这里要用opacity(透明度)

这就是,主要原理!

上视图吧

css3模拟jq点击事件的实例代码

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 #HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 #HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 #HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 #HTML / CSS
css3个性化字体_动力节点Java学院整理
Jul 12 #HTML / CSS
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 #HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 #HTML / CSS
You might like
PHP经典的给图片加水印程序
2006/12/06 PHP
初识php MVC
2014/09/10 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
python的socket编程入门
2018/01/29 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
python实现扫雷游戏
2020/03/03 Python
python访问hdfs的操作
2020/06/06 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
公务员的自我鉴定
2013/10/26 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
工程师岗位职责规定
2014/02/26 职场文书
优秀护士先进事迹
2014/05/08 职场文书
小组名称和口号
2014/06/09 职场文书
违章停车检讨书
2014/10/21 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
新生开学寄语大全
2015/05/28 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL