CSS之详解:active选择器
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>
div
{
width:100px;
height:100px;
background:red;
transition: 5s;
} div:active
{
width:300px;
height:300px;
transition:3s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这里面有两个transition，也就是意味着有两个过渡。
- 第一个过渡是激活active选择器，这时候 div:avtive 里的 transition 起作用。
- 第二个过渡是松开鼠标，图像的尺寸恢复正常的过程，这时候 div 里的 transition 起作用。
如果读者只设置了在 div 里面的 transition ，那么选择器的过渡时间也就默认为 div 里的 transition 了。
如果读者有兴趣也可以试一试transition和其他选择器的组合。
CSS之详解:active选择器的更多相关文章
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
- 带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...
- 此博客使用的CSS样式详解！
此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...
- UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
- CSS中详解hight属性
目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...
- 转：CSS圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...
- CSS长度单位详解
序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇 ...
- CSS中详解height属性
目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...
随机推荐
- .NET获取枚举DescriptionAttribute描述信息性能改进的多种方法
一. DescriptionAttribute的普通使用方式 1.1 使用示例 DescriptionAttribute特性可以用到很多地方,比较常见的就是枚举,通过获取枚举上定义的描述信息在UI上显 ...
- poj 2777（线段树的节点更新策略）
/* 之前的思想是用回溯的方式进行颜色的更新的!如果用回溯的方法的话,就是将每一个节点的颜色都要更新 通过子节点的颜色情况来判断父节点的颜色情况 !这就是TLE的原因! 后来想一想没有必要 !加入[a ...
- Deep learning：四十三(用Hessian Free方法训练Deep Network)
目前,深度网络(Deep Nets)权值训练的主流方法还是梯度下降法(结合BP算法),当然在此之前可以用无监督的方法(比如说RBM,Autoencoder)来预训练参数的权值,而梯度下降法应用在深度网 ...
- caffe-window搭建自己的小项目例子
手头有一个实际的视觉检测的项目,用的是caffe来分类,于是需要用caffe新建自己的项目的例子.在网上找了好久都没有找到合适的,于是自己开始弄. 1 首先是配置caffe的VC++目录中的inclu ...
- 百度Map与HT for Web结合的GIS网络拓扑应用
在<HT for Web整合OpenLayers实现GIS地图应用>篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地 ...
- CSS3魔法堂：认识@font-face和Font Icon
一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...
- 语义化HTML：ul、ol和dl
一.语义化元素 1. ul标签 W3C草案: The ul element represents an unordered list of items; that is, a list in wh ...
- 【Swift学习】Swift编程之旅（二）
在本节将介绍一些最基础的知识 swift提供自己版本的类型,下面说明几种简单的类型 Int 整型 Double和float 浮点型 String 字符串型 Bool 布尔型 它也提供了3种主要的强大的 ...
- Oracle10g在Win2008R2下因版本无法安装问题的解决
次文章为转载的: 首先需要从官网下载Windows_vista版本的oracle10g,下载地址为:http://download.oracle.com/otn/nt/oracle10g/10203/ ...
- JavaScript和DOM的产生与发展
首先本篇文章摘自:http://itbilu.com/javascript/js/Vyxodm_1g.html 非常感谢本篇文章的作者,他理清了我映像中混乱的DOM Level级别.让我知道了DOM0 ...