Antwort ab 2019:
Der beste Weg (eigentlich der einzige Weg *), ein tatsächliches Klickereignis nur mit CSS zu simulieren (anstatt nur auf einem Element zu schweben oder ein Element zu aktivieren , wenn Sie nicht mouseUp haben ), ist die Verwendung des Checkbox-Hacks. Es funktioniert, indem ein a über die Beschriftung labelan ein <input type="checkbox">Element angehängt wirdfor="" Attribut wird.
Diese Funktion bietet umfassende Browserunterstützung (die:checked Pseudoklasse ist IE9 +).
Wenden Sie den gleichen Wert auf ein <input>‚s ID - Attribut und ein begleitendes <label>‘ s for=""Attribut, und Sie können den Browser neu Stil sagen , das Etikett auf Klick mit der :checkedPseudo-Klasse, dank der Tatsache , dass ein Etikett klicken , wird prüfen , und deaktivieren Sie die "damit verbundenen"<input type="checkbox"> .
* Sie können ein "ausgewähltes" Ereignis über die :activeoder die :focusPseudoklasse in IE7 + simulieren (z. B. für eine Schaltfläche, die normalerweise 50pxbreit ist, können Sie ihre Breite ändern, während active:) #btnControl:active { width: 75px; }, aber dies sind keine echten "Klick" -Ereignisse. Sie sind während der gesamten Auswahl des Elements "live" (z. B. durch TabDrücken der Tastatur). Dies unterscheidet sich ein wenig von einem echten Klickereignis, bei dem - normalerweise - eine Aktion ausgelöst wird mouseUp.
Grundlegende Demo des Checkbox-Hacks (die grundlegende Codestruktur für das, was Sie fragen):
label {
display: block;
background: lightgrey;
width: 100px;
height: 100px;
}
#demo:checked + label {
background: blue;
color: white;
}
<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>
Hier habe ich das Etikett direkt nach der Eingabe in meinem Markup positioniert. Auf diese Weise kann ich mit dem nebenstehenden Geschwister-Selektor (dem +Schlüssel) nur das Etikett auswählen, das unmittelbar auf mein #demoKontrollkästchen folgt . Da die :checkedPseudoklasse für das Kontrollkästchen gilt, #demo:checked + labelgilt sie nur, wenn das Kontrollkästchen aktiviert ist.
Demo zum Ändern der Größe eines Bilds beim Klicken, was Sie fragen:
#btnControl {
display: none;
}
#btnControl:checked + label > img {
width: 70px;
height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>
Wenn das gesagt ist, gibt es einige schlechte Nachrichten. Da eine Beschriftung jeweils nur einem Formularsteuerelement zugeordnet werden kann, können Sie nicht einfach eine Schaltfläche in die <label></label>Tags einfügen und sie einen Tag lang aufrufen. Wir können es jedoch etwas CSS verwenden, um das Etikett so aussehen zu lassen, dass es dem Aussehen und Verhalten einer HTML-Schaltfläche ziemlich nahe kommt.
Demo zum Imitieren eines Schaltflächenklick-Effekts über das hinaus, was Sie verlangen:
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 20px;
background: silver;
border-radius: 5px;
padding: 1px 3px;
box-shadow: 1px 1px 1px #000;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:20px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin-left: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
outline: 1px solid black;
-moz-outline-radius: 5px;
background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}
#btnControl:checked + label {
width: 70px;
height: 74px;
line-height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>
Der größte Teil des CSS in dieser Demo dient nur zum Stylen des Beschriftungselements. Wenn Sie eigentlich keinen Knopf brauchen und ein altes Element ausreicht, können Sie fast alle Stile in dieser Demo entfernen, ähnlich wie in meiner zweiten Demo oben.
Sie werden auch feststellen, dass ich dort eine Eigenschaft mit Präfix habe -moz-outline-radius. Vor einiger Zeit hat Mozilla Firefox diese großartige, nicht spezifikationsgerechte Eigenschaft hinzugefügt, aber die Leute bei WebKit haben entschieden, dass sie sie leider nicht hinzufügen werden. Betrachten Sie diese CSS-Linie als eine progressive Verbesserung für Benutzer von Firefox.
:activefunktioniert bei gedrückter Maus. Je nachdem, was Sie versuchen, können Sie es möglicherweise mithilfe der CSS4-Pseudoklasse zum Laufen bringen:target.