Wie erstelle ich eine Schaltfläche mit drei unterschiedlichen Zuständen: Standard, Hover und Aktiviert?

Anzeige für gedrückte Schaltflächen

Frage:

Erstellen einer Schaltfläche, die ihren Status visuell einschaltet Interaktion kann eine nützliche Funktion in Benutzeroberflächen sein. Das bereitgestellte CSS ändert den Stil der Schaltfläche jedoch nur, während sie aktiv gedrückt wird. Das beabsichtigte Verhalten besteht darin, drei unterschiedliche Zustände anzunehmen: einen Standardzustand, einen Hover-Zustand und einen aktivierten (gedrückten) Zustand.

Antwort:

Bei Verwendung eines < ;Schaltfläche> Wenn das Tag möglicherweise nicht die gewünschte Ausgabe liefert, lohnt es sich, einen alternativen Ansatz mit einem -Tag zu prüfen. Etikett. Diese Lösung bietet eine ähnliche Funktionalität und bietet möglicherweise zusätzliche Flexibilität:

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Schaltfläche mit drei unterschiedlichen Zuständen: Standard, Hover und Aktiviert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!