Wie ändere ich das Erscheinungsbild einer Schaltfläche, nachdem sie gedrückt wurde, mithilfe der :target-Pseudoklasse?

Tastenauswahl „Gedrückt“

Wenn Sie das Aussehen einer Taste ändern möchten, nachdem sie gedrückt wurde, reicht die herkömmliche :aktive Auswahl möglicherweise nicht aus . Dieser Selektor wird nur ausgelöst, wenn die Taste physisch gedrückt gehalten wird.

Um die gewünschte Funktionalität zu erreichen, besteht ein alternativer Ansatz darin, die Pseudoklasse :target zu verwenden. Diese Klasse wird aktiviert, wenn der entsprechende Ankerpunkt (in diesem Fall #btn) anvisiert wird.

Implementierung:

Ersetzen Sie die Tag mit einem -Tag:

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

Passen Sie das CSS an, um die Pseudoklassen :active und :target zu integrieren:

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

Mit dieser Implementierung wird die Schaltfläche zunächst angezeigt im Normalzustand (weiß). Wenn darauf geklickt wird, wird es grün (aktiver Zustand). Nach dem Loslassen der Taste wechselt es in den roten Zustand (Sollzustand).

Das obige ist der detaillierte Inhalt vonWie ändere ich das Erscheinungsbild einer Schaltfläche, nachdem sie gedrückt wurde, mithilfe der :target-Pseudoklasse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!