首页 / CSS / CSS:active选择器的实例代码详解

CSS:active选择器的实例代码详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS:active选择器的实例代码详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1508字，纯文字阅读大概需要3分钟。

内容图文

Active的一段话

active的英文解释为“积极的”，表现在鼠标上就是点击的意思。关于active选择器最多的示例恐怕就是应用在链接上面的，然而打开链接是一个一瞬间的动作，这不能很好的体现active选择器的特点。

Active的特点

其实我们打开一个带有active链接，激活acive是有一个过程的，就是点击模块后直到松开模块。如果我们不指定这个过程所花费的时间，笔者认为其默认花费零点几秒。


<!DOCTYPE html><html>
  <head>
    <title>a</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
      <style>
      a{
        display:block;
        width:30px;
        margin:20px;
        border-radius:8px;
        padding:20px 50px;
        text-align:center;
        background:green;
      }
      a:active{
        background:indigo;
      }
    </style>
  </head>
  
  <body>
    <a href="paris.jpg">link</a>
  </body></html>

我们可以通过过渡属性（transition）来调整这个时间。


      a:active{
        background:indigo;
        transition:3s;
      }

读者可以做一个实验，改变其中transition的值，然后测试:avtive选择器所花费的时间。

ACTIVE示例


<!DOCTYPE html><html>
  <head>
    <title>a</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
    <style> 
       p      {
        width:100px;
        height:100px;
        background:red;
        transition: 5s;
       }

        p:active       {
        width:300px;
        height:300px;
        transition:3s;
        }
      </style>
  </head>
  <body>
  <p></p>
  </body></html>

这里面有两个transition，也就是意味着有两个过渡。


    1. 第一个过渡是激活active选择器，这时候 p:avtive 里的 transition 起作用。

    2. 第二个过渡是松开鼠标，图像的尺寸恢复正常的过程，这时候 p 里的 transition 起作用。

如果读者只设置了在 p 里面的 transition ，那么选择器的过渡时间也就默认为 p 里的 transition 了。

以上就是CSS :active选择器的实例代码详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS:active选择器的实例代码详解全部内容，希望文章能够帮你解决CSS:active选择器的实例代码详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/413237.html

来源：【匿名】