Heim > Artikel > Web-Frontend > Wie erstelle ich mit HTML und CSS eine Umschalttaste mit Push-In- und Pop-Out-Effekt?
Erstellen einer Umschaltschaltfläche in HTML und CSS
Frage:
Wie kann ich erstellen eine Umschalttaste in HTML mit CSS, die beim Klicken eingedrückt bleibt und bei erneutem Klicken herausspringt?
Antwort:
Implementierung einer reinen CSS-Lösung für eine funktionale Umschalttaste ist herausfordernd. Ein alternativer Ansatz besteht darin, ein mit CSS gestaltetes und mit JavaScript ergänztes Kontrollkästchen zu verwenden.
jQuery-Implementierung:
Die empfohlene Lösung umfasst eine einfache jQuery-Funktion und zwei Hintergrundbilder dazu bezeichnen die verschiedenen Tastenzustände. Hier ein Beispiel:
<code class="javascript">$(document).ready(function() { $('a#button').click(function() { $(this).toggleClass("down"); }); });</code>
<code class="css">a { background: #ccc; cursor: pointer; border-top: solid 2px #eaeaea; border-left: solid 2px #eaeaea; border-bottom: solid 2px #777; border-right: solid 2px #777; padding: 5px 5px; } a.down { background: #bbb; border-top: solid 2px #777; border-left: solid 2px #777; border-bottom: solid 2px #eaeaea; border-right: solid 2px #eaeaea; }</code>
<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="button" title="button">Press Me</a></code>
Das obige ist der detaillierte Inhalt vonWie erstelle ich mit HTML und CSS eine Umschalttaste mit Push-In- und Pop-Out-Effekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!