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>

Copy after login

We can adjust this time through the transition attribute.

      a:active{
        background:indigo;
        transition:3s;
      }

Copy after login

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>

Copy after login

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!