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和其他选择器的组合。

转载于:https://www.cnblogs.com/HDK2016/p/6128277.html

CSS之详解:active选择器相关推荐

JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
CSS基本操作详解及截图演示
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
css名词解析,小说CSS样式详解
CSS格式详解字体格式(font) 字体表格题目位置 once:只朗读一次(默许值): always:多次朗读: inherit:启当: 文字年夜小 font-size: xx-small | x ...
Css display 详解
Css display 详解 display :none display :block display :inline display :inline-block display :inherit d ...
一定能用到的简单但实用的五种按钮样式（原生HTML+CSS步骤详解，含详细注释）
前言一按钮在前端开发中往往是一个必不可少的元素,也有许多精美好看的样式资源供开发者直接使用.但博主认为,对于初学者而言,总是去cv别人做好的,而不理解其中的原理,是很不好的. 本人作为一名计 ...
前端之CSS篇(四)——CSS浮动详解
前言:页面布局要学习三大核心,盒子模型,浮动和定位 . 1.CSS浮动场景:整个网页的布局本节需要解决的问题: 为什么需要浮动浮动的排列特性 3种最常见的布局方式为什么需要清除浮动写出至少 ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）...
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
css样式详解及覆盖顺序
文章目录 1. 覆盖顺序 2. 样式类别 2.1. 浏览器缺省值 2.2. 内联样式 2.3. 内部样式表 2.4. 外部样式表 3. 选择器 3.1. 基本选择器 3.1.1. 元素选择器 3.1. ...

CSS之详解:active选择器

Active的一段话

Active的特点

ACTIVE示例

CSS之详解:active选择器相关推荐

最新文章

热门文章