Home > Article > Web Front-end > css3 simulate jq click event
Today is a css3 simulated jq click event, because I found that there is no click event similar to js in css3. So, can I imitate the effect of
jq and make one similar to it? It mainly uses the radio radio button in the input, and then follows it with an a tag to let the radio cover a. Then why not just
put a on top of the radio? Because selector + is a good choice, use the function of radio, a to modify the button style, and then hide the radio. Here you need to use opacity
This is the main principle!
Go to the view
##
<!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下,是因为; 选择器 + 容易选到。 --> <p 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> </p> </body> </html>For more css3 simulated jq click events related articles please pay attention to PHP Chinese net!