Wie ändere ich den Tastenstil, nachdem ich geklickt habe, anstatt ihn gedrückt zu halten?

Auswahl für gedrückte Schaltflächen

Der bereitgestellte CSS-Code für die Schaltfläche, die den Selektor :active verwendet, ändert den Schaltflächenstil erst, wenn darauf geklickt wird gehalten. Um den gewünschten Effekt zu erzielen, bei dem sich der Schaltflächenstil nach dem Drücken ändert, ist ein anderer Ansatz erforderlich.

Anstelle der Verwendung des :active-Selektors, der nur ausgelöst wird, wenn auf die Schaltfläche geklickt wird, können Sie Folgendes verwenden: Zielselektor, um den Stil der Schaltfläche zu ändern, nachdem darauf geklickt wurde. Der :target-Selektor stimmt mit einem Element überein, das das Ziel der aktuellen Hyperlink-Referenz ist.

Hier ist ein Beispiel mit einem Ankertag () anstelle einer Schaltfläche:

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

<code class="html"><a id="btn" href="#btn">Demo</a></code>

In diesem Beispiel hat das Anker-Tag die ID „btn“ und einen Link zu derselben ID. Wenn auf den Link geklickt wird, wird das Anker-Tag zum Ziel der Hyperlink-Referenz und der :target-Selektor wird angewendet, wodurch der Schaltflächenstil in Rot geändert wird.

Das obige ist der detaillierte Inhalt vonWie ändere ich den Tastenstil, nachdem ich geklickt habe, anstatt ihn gedrückt zu halten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!