您的位置：首页 > Web前端 > CSS

CSS之详解:active选择器

2016-12-03 11:27 225 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航