Wie erreicht man dauerhafte Änderungen des Schaltflächenstils beim Klicken?

Auswahltaste für gedrückte Tasten

Problem:

Sie stoßen auf ein Szenario, in dem Sie Änderungen vornehmen möchten das Erscheinen einer Taste beim Drücken, um ein spürbares visuelles Feedback zu erzeugen. Sie haben versucht, die Pseudoklasse :active zu verwenden, aber die Stiländerung erfolgt nur, wenn Sie auf die Schaltfläche klicken und sie gedrückt halten.

Antwort:

Während die :active Die Pseudoklasse scheint eine geeignete Option zu sein, sie wurde speziell dafür entwickelt, ein Element zu formatieren, während es aktiv gedrückt wird. Um den gewünschten Effekt zu erzielen, wird ein alternativer Ansatz empfohlen.

Erwägen Sie die Verwendung eines Ankerelements anstelle einer Element. Dies entspricht möglicherweise nicht genau Ihren ursprünglichen Anforderungen, eröffnet jedoch zusätzliche Möglichkeiten, wenn Sie mit keine direkte Lösung finden:

CSS-Code:

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

HTML-Code:

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

Mit diesem Ansatz können Sie nun folgendes Verhalten beobachten:

• Normalzustand: Button ist weiß
• Beim Klicken: Die Schaltfläche wird grün
• Nach dem Loslassen: Die Schaltfläche wird rot

Das obige ist der detaillierte Inhalt vonWie erreicht man dauerhafte Änderungen des Schaltflächenstils beim Klicken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!