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>

转载于:https://www.cnblogs.com/xsk-style/p/6329491.html

css3模拟jq点击事件相关推荐

html5模拟点击事件,css3模拟jq点击事件的实例代码
今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签 ...
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
php鼠标点击事件,javascript模拟鼠标点击事件的实例代码
javascript触发模拟鼠标点击事件事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法. 一般 ...
html原生触发事件,jQ点击事件用原生写的方法.html
onclick事件 htmlOnClickHandler html元素不加on不会触发事件 htmlOnClick jsOnClick addEventListener addEventListene ...
linux中c语言对滑屏进行判断,自动化测试程序之二模拟触摸屏点击事件跟滑动事件（C语言）...
一.测试程序编写说明终端设备上运行的是LINUX+QT应用程序,使用触摸屏进行人机交互.经过测试人员长时间的人机交互测试,来确认系统的功能是否满足需求后.现在需要编写一个自动化的测试程序模拟触摸屏点 ...
android 模拟点击localinstrumentation,Android Instrumentation模拟鼠标点击事件
看了几遍网上的博客一直没有模拟出鼠标点击事件和按钮事件,后来抱着试试态度再重试的时候终于有所斩获.下面把具体的情况记录一下: 首先我们必须了解类 Instrumentation: Instrumen ...
模拟grid点击事件
当一个grid.panel里的store加载完毕后,模拟点击事件.只需在store加载事加监听即可.例子如下: onReloadCrawlerStore: function(me, records, ...
Windows下C/C++模拟鼠标点击，PC端没有鼠标设备也能够获取鼠标坐标、移动鼠标坐标、模拟鼠标点击事件，方法一亲测有效
------- [ 转载请保留 ] ------- 作者:西_瓜_瓜博客:https://blog.csdn.net/xi_gua_gua/article/details/105773298 --- ...
QNX平台模拟屏幕点击事件
前言 QNX系统下界面是以screen为单位,纵向分层显示.工作中遇到screenA的touch事件被screenB截获,导致screenA监测release事件一直未释放而无响应的问题.考虑在出现问 ...
jq点击事件(jq点击事件)
用的HTML5里video标签,用jq怎么点击全屏之后自动横屏播? 可以自己设置的 js如何获取class的元素不能用jq<br/1br/>2 2.var classElements = ...

css3模拟jq点击事件

css3模拟jq点击事件相关推荐

最新文章

热门文章