css3模拟jq点击事件

时间：2021-09-25 00:49:55

还是这个梗，收好冷。今天是一个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>

　　

css3模拟jq点击事件的更多相关文章

  1. jq点击事件不生效，效果只闪现一次又立马消失的原因？

    出现的问题:jq点击事件不生效,点击的时候效果实现但又立马消失,页面重新刷新了一次 可能出现的原因: a标签href属性的原因,虽然点击事件生效,但页面又刷新了一次,所以没有效果,只闪了一次 解决方案 ...

  2. jq点击事件未生效

    jq点击事件未生效,应写成事件委托的方式 // $(function(){ // $('.current a').on("click", function(){ // $(this ...

  3. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  4. layui问题之模拟select点击事件

    一.问题 不操作页面,实现模拟select的事件,即,自动出现下拉框,自动点击下拉框的值,select文本框的值随之改变 二.经过 刚开始查看layui官方文档,发现仅仅只是有select监听事件,即 ...

  5. jQuery模拟鼠标点击事件失效的问题

    最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click ...

  6. Objective-C：模拟按钮点击事件理解代理模式

    OC中的协议(Protocol)和和.NET中的接口(Interface)类似,简单来讲,就是一系列方法的列表,其中声明的方法可以被任何类实现.不同的是,在.NET中,如果某个类实现了一个接口,就必须 ...

  7. C&num;实现模拟鼠标点击事件（点击桌面的其他程序 ）

    注释感觉已经很清楚了,有不懂的欢迎评论 1 using System; using System.Collections.Generic; using System.ComponentModel; u ...

  8. 今天依然是 JQ点击事件之&OpenCurlyDoubleQuote;点击淡入淡出事件”

    废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ ...

  9. js模拟自动点击事件

    1.直接上代码很直观 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. 一起学习jQuery2&period;0&period;3源码—1&period;开篇

    write less,do more jQuery告诉我们:牛逼的代码不仅精简而且高效! 2006年1月由美国人John Resig在纽约的barcamp发布了jQuery,吸引了来自世界各地众多Ja ...

  2. Linux下ejabberd开机自启（CentOS）

    废话少说,Linux下开机自启动Ejabberd步骤如下: 1.从ejabberd安装目录的bin目录拷贝ejabberd.init到/etc/init.d/ejabberd下 [root@imser ...

  3. js 对象深复制，创建对象和继承

    js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...

  4. HDU 3480 division

    题目大意:一个有n个数的集合,现在要求将他分成m+1个子集,对子集i设si表示该集合中最大数与最小数的差的平方.求所有si的和的最小值.n<=10000,m<=5000. 分析:最优解的m ...

  5. Python学习教程&lpar;learning Python&rpar;--2&period;3&period;3 Python函数型参详解

    本节讨论Python下函数型参的预设值问题. Python在设计函数时,可以给型参预设缺省值,当用户调用函数时可以不输入实参.如果用户不想使用缺省预设值则需要给型参一一赋值,可以给某些型参赋值或不按型 ...

  6. OpenSSL命令---ciphers

    用途: 指令是用来展示用于SSL加密算法的工具.它能够把所有openssl支持的加密算法按照一定规律排列(一般是加密强度).这样可以用来做测试工具,决定使用什么加密算法. 用法: openssl ci ...

  7. js匿名函数

    <script type="text/javascript"> $(function () { $("#btn").mousedown(functi ...

  8. 谋哥：App自推广这个概念就由我来创立了！

    ［谋哥每天一干货,第六十四篇］ 昨天谋天团新增加了一名90后会员崔崔(微信号cuinianyyyy9),之前请教过我关于怎样从.Net到移动IOS开发然后创业的问题.我说你转到IOS,你须要自己学新语 ...

  9. 使用ant自动编译、打包生成apk文件

    上次使用命令行生成apk文件<Android 命令行编译.打包生成apk文件>,学习命令行生成的目的是为了编写ant打下基础. 一. ant环境 下载ant包,配置环境变量 二.ant编译 ...

  10. 基于visual Studio2013解决算法导论之005原地随机排列数组

     题目 原地随机排列数组 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> ...

相关文章