Kann ich einen Onclick-Effekt in CSS haben?

Question

Ich habe ein Bildelement, das ich bei einem Klick ändern möchte.

<img id="btnLeft">

Das funktioniert:

#btnLeft:hover {
    width: 70px;
    height: 74px;
}

Aber was ich brauche, ist:

#btnLeft:onclick {
    width: 70px;
    height: 74px;
}

Aber es funktioniert natürlich nicht. Ist es überhaupt möglich, eine onclick Verhalten in CSS (d. h. ohne Verwendung von JavaScript)?

Answer 1

Der beste Weg (eigentlich der einzige Weg*) zur Simulation einer tatsächlichen anklicken. Ereignis, das nur CSS verwendet (anstatt nur mit dem Mauszeiger über ein Element zu fahren oder ein Element aktiv zu machen, wo man keine mouseUp ) ist es, den Checkbox-Hack zu verwenden. Er funktioniert durch Anhängen eines label zu einer <input type="checkbox"> Element über das Label for="" Attribut.

Diese Funktion hat breite Browserunterstützung (die :checked Pseudoklasse ist IE9+).

Wenden Sie denselben Wert auf eine <input> ID-Attribut und ein dazugehöriges <label> 's for="" Attribut, und Sie können den Browser anweisen, die Beschriftung beim Klicken mit dem :checked Pseudoklasse, da durch das Anklicken eines Etiketts die "zugehörige" Option aktiviert und deaktiviert wird. <input type="checkbox"> .

* Sie können ein "ausgewähltes" Ereignis über die Funktion :active o :focus Pseudoklasse im IE7+ (z. B. für eine Schaltfläche, die normalerweise 50px breit ist, können Sie seine Breite ändern, indem Sie active : #btnControl:active { width: 75px; } ), aber das sind keine echten "Klick"-Ereignisse. Sie sind "live" während der gesamten Zeit, in der das Element ausgewählt ist (z. B. durch Tab bing mit Ihrer Tastatur), was sich ein wenig von einem echten Klick-Ereignis unterscheidet, bei dem eine Aktion ausgelöst wird, wenn - normalerweise - 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 Label direkt nach der Eingabe in meinem Markup positioniert. Dadurch kann ich die Selektor für benachbarte Geschwister (die + Taste), um nur das Etikett auszuwählen, das unmittelbar auf meine #demo Kontrollkästchen. Da die :checked Pseudoklasse gilt für das Kontrollkästchen, #demo:checked + label wird nur angewendet, wenn das Kontrollkästchen aktiviert ist.

Demo für die Größenänderung eines Bildes beim Anklicken, was Ihre Frage ist:

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/140" id="btnLeft" /></label>

In diesem Zusammenhang ist festzustellen, dass es eine schlechte Nachricht. Denn ein Etikett kann nur jeweils mit einem Formularsteuerelement verbunden Das bedeutet, dass Sie nicht einfach eine Schaltfläche innerhalb der <label></label> Tags und machen Sie Feierabend. Aber wir puede Verwenden Sie CSS, um das Aussehen und das Verhalten des Etiketts an das Aussehen und das Verhalten einer HTML-Schaltfläche anzupassen.

Demo für die Nachahmung eines Tastenklick-Effekts, die über das hinausgeht, 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;
    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>

Das meiste CSS in dieser Demo ist nur für das Styling des Label-Elements. Wenn Sie nicht wirklich ein Taste und ein beliebiges altes Element reicht aus, dann können Sie fast alle Stile in dieser Demo entfernen, ähnlich wie in meiner zweiten Demo oben.

Answer 2

Am nächsten kommen Sie dem Ziel :active :

#btnLeft:active {
    width: 70px;
    height: 74px;
}

Dabei wird der Stil jedoch nur angewendet, wenn die Maustaste gedrückt gehalten wird. Die einzige Möglichkeit, einen Stil anzuwenden und halten Sie es angewendet onclick ist es, ein wenig JavaScript zu verwenden.

Answer 3

Sie können die Pseudoklasse :target um das On-Click-Ereignis zu imitieren. Lassen Sie mich Ihnen ein Beispiel geben.

#something {
  display: none;
}

#something:target {
  display: block;
}

<a href="#something">Show</a>
<div id="something">Bingo!</div>

So sieht es aus: http://jsfiddle.net/TYhnb/

Eine Sache, die zu beachten ist, ist dies nur auf Hyperlink beschränkt, so dass, wenn Sie auf eine andere als ein Hyperlink, wie eine Schaltfläche verwenden müssen, möchten Sie vielleicht ein wenig hacken, wie Styling einen Hyperlink zu sehen wie eine Schaltfläche.

Answer 4

Wenn Sie dem Element einen tabindex dann können Sie die :focus Pseudoklasse, um einen Klick zu simulieren.

#btnLeft:focus {
  width: 70px;
  height: 74px;
}

<img id="btnLeft" tabindex="0" src="https://picsum.photos/200"/>

Answer 5

Die folgenden Ausführungen beziehen sich auf einen Onclick, der dem Onclick von JavaScript ähnelt, nicht auf den :active Pseudoklasse.

Dies kann nur entweder mit JavaScript oder dem Checkbox Hack .

Mit dem Checkbox-Hack können Sie auf eine Beschriftung klicken, die ein Kontrollkästchen "aktiviert", so dass Sie die Beschriftung nach Ihren Wünschen gestalten können.

Les Demo .

_{Beantwortet, bevor der Auftraggeber klarstellte, was er wollte.}