css3模拟jq点击事件

绝地灬酷狼 2022-07-11 08:59 170阅读 0赞

还是这个梗，收好冷。今天是一个css3模拟jq点击事件，因为我发现，css3中没有类似于，js的点击事件，那么，可不可以仿照

jq的效果，类似的做一个呢？主要用到,input里面的radio 单选按钮，然后后面跟一个a标签，让radio覆盖在a上，那为什么不直接

把 a放在radio上面呢？因为选择器 + 好选择嘛，用radio的功能，a来修饰按钮样式，再把radio 隐藏，这里要用opacity（透明度）

这就是，主要原理！

上视图吧

![1074307-20170120220300562-1984689121.gif][]

<!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>
    		
    		<div class="fd">
    			<input type="radio" name="单选"  />
    			<a href="#">css</a>
    			<input type="radio" name="单选"   />
    			<a href="#">html</a>
    			<input type="radio" name="单选"  />
    			<a href="#">javascript</a>
    		</div>
    	</body>
    </html>

[1074307-20170120220300562-1984689121.gif]: /images/20220711/c9983c7cd2b448c883726079e64975b3.png