Rumah > Artikel > hujung hadapan web > CSS :active选择器的实例代码详解
CSS :active选择器的实例代码详解
- 黄舟asal
- 2017-07-19 17:07:191959semak imbas
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，也就是意味着有两个过渡。
第一个过渡是激活active选择器，这时候 p:avtive 里的 transition 起作用。
第二个过渡是松开鼠标，图像的尺寸恢复正常的过程，这时候 p 里的 transition 起作用。
如果读者只设置了在 p 里面的 transition ，那么选择器的过渡时间也就默认为 p 里的 transition 了。
Atas ialah kandungan terperinci CSS :active选择器的实例代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS中a:active的作用以及使用详解Artikel seterusnya：css：div中的class与id的区别？