网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )

今天是一个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制作的20种loading动效
下一篇:css3截图_动力节点Java学院整理
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?