原码笔记

原码笔记

css3模拟jq点击事件的实例代码

小诸哥 0

今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签,让radio覆盖在a上,那为什么不直接把 a放在radio上面呢?因为选择器 + 好选择嘛,用radio的功能,a来修饰按钮样式,再把radio 隐藏,这里要用opacity(透明度)

这就是,主要原理!

上视图吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
 
<html>
 
    <head>
 
        <metacharset="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下,是因为;
 
            选择器 + 容易选到。
 
        -->
 
        <divclass="fd">
 
            <inputtype="radio"name="单选"id="a1"/>
 
            <ahref="#">css</a>
 
            <inputtype="radio"name="单选"id="a2" />
 
            <ahref="#">html</a>
 
            <inputtype="radio"name="单选"id="a3"/>
 
            <ahref="#">javascript</a>
 
        </div>
 
    </body>
 
</html>

标签: 点击 实例 代码