css3仿真模拟jq点一下恶性事件的案例编码

2021-01-20 18:25 jianzhan

今日是1个css3仿真模拟jq点一下恶性事件,由于我发现,css3中沒有相近于,js的点一下恶性事件,那末,可不能以模仿jq的实际效果,相近的做1个呢?关键用到,input里边的radio 单选按钮,随后后边跟1个a标识,让radio遮盖在a上,那为何不立即把 a放在radio上面呢?由于挑选器 + 好挑选嘛,用radio的作用,a来装饰按钮款式,再把radio 掩藏,这里要用opacity(全透明度)

这便是,关键基本原理!

上主视图吧

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF⑻">

        <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要统1

            基本原理便是,把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>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。