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教程:background-clip和background-origin
Oct 17 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 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 URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
js闭包的用途详解
2014/11/09 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
python编程实现希尔排序
2017/04/13 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
竞选演讲稿范文大全
2014/05/12 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
学校节水倡议书
2015/04/29 职场文书
2016年寒假家长评语
2015/10/10 职场文书
学校标语口号大全
2015/12/26 职场文书
2017春节晚会开幕词
2016/03/03 职场文书