Heim > Artikel > Web-Frontend > Ausführliche Erläuterung des Beispielcodes des CSS:aktiven Selektors

Ausführliche Erläuterung des Beispielcodes des CSS:aktiven Selektors

黄舟Original: 2017-07-19 17:07:191959Durchsuche

Eine Passage aus Active

Die englische Erklärung von active ist „active“, was „Klicken mit der Maus“ bedeutet. Das häufigste Beispiel für den aktiven Selektor ist wahrscheinlich die Anwendung auf Links. Das Öffnen eines Links ist jedoch eine vorübergehende Aktion, die die Eigenschaften des aktiven Selektors nicht gut widerspiegelt.

Funktionen von Active

Tatsächlich gibt es einen Prozess, um Active zu aktivieren, wenn wir einen Link mit Active öffnen ist, auf das Modul zu klicken, bis das Modul freigegeben wird. Wenn wir die Zeit, die dieser Vorgang benötigt, nicht angeben, dauert er meiner Meinung nach standardmäßig einige Zehntelsekunden.

<!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>

Wir können diese Zeit über das Übergangsattribut anpassen.

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

Leser können ein Experiment durchführen, den Wert des Übergangs ändern und dann testen: die Kosten dafür die aktive Selektorzeit.

AKTIVES Beispiel

<!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>

Es gibt zwei Übergänge, was bedeutet, dass es zwei Übergänge gibt.

Der erste Übergang besteht darin, den aktiven Selektor zu aktivieren, zu diesem Zeitpunkt p : Der Übergang in aktiven Werken.
Der zweite Übergang erfolgt, wenn die Maus losgelassen wird und die Bildgröße wieder normal wird. Zu diesem Zeitpunkt wird der Übergang in p wirksam.

Wenn der Leser nur den Übergang in p festlegt, wird die Übergangszeit des Selektors standardmäßig auf den Übergang in p eingestellt.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispielcodes des CSS:aktiven Selektors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Die Rolle von a:active in CSS und detaillierte Erklärung seiner VerwendungNächster Artikel：Die Rolle von a:active in CSS und detaillierte Erklärung seiner Verwendung

In Verbindung stehende Artikel

Mehr sehen