Home > Article > Web Front-end > Detailed explanation of example code of CSS :active selector
Detailed explanation of example code of CSS :active selector
- 黄舟Original
- 2017-07-19 17:07:192009browse
Active's passage
active's English explanation is "active", which means clicking on the mouse. The most common examples of the active selector are probably applied to links. However, opening a link is a momentary action, which does not reflect the characteristics of the active selector well.
Characteristics of Active
In fact, when we open a link with active, there is a process to activate active, which is to click on the module until the module is released. If we do not specify the time this process takes, I think it takes a few tenths of a second by default.
<!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>
We can adjust this time through the transition attribute.
a:active{
background:indigo;
transition:3s;
}
Readers can do an experiment, change the value of the transition, and then test: the time spent by the avtive selector .
ACTIVE example
<!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>There are two transitions, which means there are two transition.
The first transition is to activate the active selector, at this time p: The transition in avtive works.
The second transition is the process of releasing the mouse and returning the image size to normal. At this time, the transition in p takes effect.
If the reader only sets the transition in p , then the transition time of the selector will default to the transition in p .
The above is the detailed content of Detailed explanation of example code of CSS :active selector. For more information, please follow other related articles on the PHP Chinese website!