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 相关文章推荐
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 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
如何选购合适的收音机
2021/03/01 无线电
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
主题婚礼策划方案
2014/02/10 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
三下乡活动心得体会
2016/01/23 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Golang 链表的学习和使用
2022/04/19 Golang