Maison > interface Web > tutoriel CSS > Explication détaillée de l'exemple de code CSS : sélecteur actif

Explication détaillée de l'exemple de code CSS : sélecteur actif

黄舟
Libérer: 2017-07-19 17:07:19
original
2035 Les gens l'ont consulté

Un passage d'Active

L'explication anglaise d'active est "active", ce qui signifie cliquer sur la souris. L'exemple le plus courant de sélecteur actif est probablement appliqué aux liens. Cependant, l'ouverture d'un lien est une action momentanée, qui ne reflète pas bien les caractéristiques du sélecteur actif.

Caractéristiques d'Active

En fait, lorsque nous ouvrons un lien avec actif, il existe un processus pour activer actif, qui est de cliquer sur le module jusqu'à ce que le module soit libéré. Si on ne précise pas le temps que prend ce processus, je pense qu'il prend quelques dixièmes de seconde par défaut.


<!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>
Copier après la connexion

Nous pouvons ajuster ce temps grâce à l'attribut de transition.


      a:active{
        background:indigo;
        transition:3s;
      }
Copier après la connexion

Les lecteurs peuvent faire une expérience, modifier la valeur de la transition, puis tester : le coût de le temps de sélection actif.

Exemple ACTIF


<!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>
Copier après la connexion

Il y a deux transitions, ce qui signifie qu'il y a deux transitions.


    1. La première transition consiste à activer le sélecteur actif, à ce moment p : La transition dans les œuvres actives.

    2. La deuxième transition se produit lorsque la souris est relâchée et que la taille de l'image revient à la normale. À ce moment, la transition en p prend effet.

Si le lecteur définit uniquement la transition dans p , alors le temps de transition du sélecteur sera par défaut la transition dans p .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal