Ich habe ein Bildelement, das ich beim Klicken ä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 offensichtlich nicht. Ist es überhaupt möglich, sich onclickin CSS zu verhalten (dh ohne JavaScript zu verwenden)?

Der nächste, den Sie bekommen, ist :active:

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

Dies wird jedoch nur angewendet, wenn die Maustaste gedrückt gehalten wird. Der einzige Weg , einen Stil anwenden und halten sie angewendet Onclick ist ein bisschen JavaScript zu verwenden.

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.

Sie können die Pseudoklasse verwenden :target, um ein Klickereignis nachzuahmen. 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/

Beachten Sie, dass dies nur auf Hyperlinks beschränkt ist. Wenn Sie also einen anderen Link als einen Hyperlink verwenden müssen, z. B. eine Schaltfläche, möchten Sie ihn möglicherweise ein wenig hacken, z. B. indem Sie einen Hyperlink so gestalten, dass er wie eine Schaltfläche aussieht.

Wenn Sie dem Element ein geben tabindex, können Sie das verwenden:focus Pseudoklasse verwenden, um einen Klick zu simulieren.

HTML

<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />

CSS

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

http://jsfiddle.net/NaTj5/

Bearbeiten: Beantwortet, bevor OP klarstellte, was er wollte. Das Folgende gilt für einen Onclick, der javascripts onclick ähnelt, nicht für die Pseudoklasse :active.

Dies kann nur mit Javascript oder dem Checkbox Hack erreicht werden

Mit dem Checkbox-Hack können Sie im Wesentlichen auf ein Etikett klicken, das ein Kontrollkästchen "aktiviert", sodass Sie das Etikett nach Ihren Wünschen gestalten können.

Die Demo

TylerH gab eine wirklich gute Antwort und ich musste nur der letzten Button-Version ein Update geben.

#btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 30px;
    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:30px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}

.btn:active {
    margin: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    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>

Wie wäre es mit einer reinen CSS-Lösung, ohne (das) hackig zu sein?

.page {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #121519;
  color: whitesmoke;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.arrow {
  cursor: pointer;
  transition: filter 0.3s ease 0.3s;
}

.arrow:active {
  filter: drop-shadow(0 0 0 steelblue);
  transition: filter 0s;
}

<body class="page">
  <div class="controls">
    <div class="arrow">
      <img src="https://i.imgur.com/JGUoNfS.png" />
    </div>
  </div>
</body>

@ TylerH hat eine großartige Resonanz, ist aber eine ziemlich komplexe Lösung. Ich habe eine Lösung für diejenigen unter Ihnen, die nur einen einfachen "Onclick" -Effekt mit reinem CSS ohne eine Reihe zusätzlicher Elemente wünschen.

Wir werden einfach CSS-Übergänge verwenden. Ähnliches könnten Sie wahrscheinlich mit Animationen tun.

Der Trick besteht darin, die Verzögerung für den Übergang so zu ändern, dass sie beim Klicken des Benutzers anhält.

.arrowDownContainer:active,
.arrowDownContainer.clicked {
  filter: drop-shadow(0px 0px 0px steelblue);
  transition: filter 0s;
}

Hier füge ich auch die "angeklickte" Klasse hinzu, damit Javascript auch den Effekt liefern kann, wenn es nötig ist. Ich verwende den 0px-Schlagschattenfilter, da er die gegebene transparente Grafik auf diese Weise für meinen Fall blau hervorhebt.

Ich habe hier einen Filter bei 0s, damit er nicht wirksam wird. Wenn der Effekt freigegeben ist, kann ich den Übergang mit einer Verzögerung hinzufügen, so dass ein schöner "angeklickter" Effekt erzielt wird.

.arrowDownContainer {
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  top: 490px;
  left: 108px;
  height: 222px;
  width: 495px;
  z-index: 3;
  transition: filter 0.3s ease 0.3s;
}

Auf diese Weise kann ich es so einrichten, dass beim Klicken des Benutzers auf die Schaltfläche Blau hervorgehoben und dann langsam ausgeblendet wird (Sie können natürlich auch andere Effekte verwenden).

Während Sie hier in dem Sinne eingeschränkt sind, dass die hervorzuhebende Animation sofort erfolgt, bietet sie dennoch den gewünschten Effekt. Sie könnten diesen Trick wahrscheinlich mit Animation verwenden, um einen reibungsloseren Gesamtübergang zu erzielen.

Okay, dies ist vielleicht ein alter Beitrag ... aber er war das erste Ergebnis in Google und entschied sich, einen eigenen Mix daraus zu machen als ..

Zuerst werde ich FOCUS verwenden

Der Grund dafür ist, dass es für das Beispiel, das ich zeige, gut funktioniert. Wenn jemand ein Ereignis vom Typ "Maus nach unten" möchte, verwenden Sie es Aktiv"

DER HTML-CODE:

<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>

DER CSS-CODE:

/* Change Button Size/Border/BG Color And Align To Middle */
    .mdT {
        width:96px;
        height:96px;
        border:0px;
        outline:0;
        vertical-align:middle;
        background-color:#AAAAAA;
    }
    .mdT:focus {
        width:256px;
        height:256px;
    }

/* Change Images Depending On Focus */
    .mdI1       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img1');     }
    .mdI1:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+1');   }
    .mdI2       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img2');     }
    .mdI2:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+2');   }
    .mdI3       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img3');     }
    .mdI3:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+3');   }
    .mdI4       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img4');     }
    .mdI4:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+4');   }

JS FIDDLE LINK: http://jsfiddle.net/00wwkjux/

Warum poste ich das in einem alten Thread, weil die Beispiele hier unterschiedlich sind und ich dachte, ich würde der Community eines zurückgeben, was ein funktionierendes Beispiel ist.

Wie bereits vom Thread-Ersteller beantwortet, soll der Effekt nur während des Klickereignisses anhalten. Nun, während dies für dieses Bedürfnis nicht genau ist, ist es nahe. active wird animiert, während die Maus gedrückt ist, und alle Änderungen, die Sie länger benötigen, müssen mit Javascript vorgenommen werden.

Warnung! Besonders einfache Antwort unten! :) :)

Sie können tatsächlich eine Änderung vornehmen, die bestehen bleibt (z. B. ein Block / Popup, der nach einem Klick angezeigt wird und sichtbar bleibt), und zwar nur mit CSS (und ohne Verwendung des Kontrollkästchen-Hacks), obwohl viele der (ansonsten korrekten) Antworten hier so lange behaupten da Sie nur während des Schwebefluges Ausdauer brauchen.

Schauen Sie sich also die Antworten von Bojangles und TylerH an, wenn diese für Sie funktionieren, aber wenn Sie eine einfache und nur CSS-Antwort wünschen, die einen Block nach dem Klicken sichtbar hält (und den Block sogar mit einem nachfolgenden Klick verschwinden lassen kann), dann siehe diese Lösung.

Ich hatte eine ähnliche Situation, ich brauchte ein Popup-Div mit onClick, in dem ich kein JS hinzufügen oder das Markup / HTML (eine echte CSS-Lösung) ändern konnte, und dies ist mit einigen Einschränkungen möglich. Sie können den Trick: target nicht verwenden, mit dem ein schönes Popup erstellt werden kann, es sei denn, Sie können den HTML-Code (um eine 'ID' hinzuzufügen) so ändern, dass er nicht mehr angezeigt wird.

In meinem Fall war das Popup-Div im anderen Div enthalten, und ich wollte, dass das Popup über dem anderen Div angezeigt wird. Dies kann mithilfe einer Kombination aus: active und: hover: erfolgen.

/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
    position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
    display: block;
}
/* General settings for popup */
.info {
    position: absolute;
    top: -5;
    display: none;
    z-index: 100;
    background-color: white;
    width: 200px;
    height: 200px;
}

Beispiel (sowie eines, bei dem Sie auf das Popup klicken können, um es verschwinden zu lassen) unter:

http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/

Ich habe unten auch ein Code-Snippet-Beispiel eingefügt, aber die Positionierung in der Stackoverflow-Sandbox ist seltsam, sodass ich den Text "Hier klicken" nach innerDiv setzen musste, was normalerweise nicht benötigt wird.

/* Outer div - needs to be relative so we can use absolute positioning */
	.clickToShowInfo {
		position: relative;
	}
	/* When clicking outer div, make inner div visible */
	.clickToShowInfo:active .info { visibility: visible; }
	/* And hold by staying visible on hover */
	.info:hover {
		visibility: visible;
	}
	/* General settings for popup */
	.info {
		position: absolute;
		top: -10;
		visibility: hidden;
		z-index: 100;
		background-color: white;
		box-shadow: 5px 5px 2px #aaa;
		border: 1px solid grey;
		padding: 8px;
		width: 220px;
		height: 200px;
	}
	/* If we want clicking on the popup to close, use this */
	.info:active {
		visibility: hidden;	/* Doesn't work because DCEvent is :active as well */
		height: 0px;
		width: 0px;
		left: -1000px;
		top: -1000px;
	}

<p />
<div class="clickToShowInfo">
	<div class="info">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
	</div>
	Click here to show info
</div>
<p />

Ich habe den folgenden Code für Mauszeiger und Mausklick und es funktioniert:

//For Mouse Hover
.thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    text-align:center;
    vertical-align:middle;
    height: 70%;
    width: 80%;
    top:auto;
    left: 10%;
}

und dieser Code verbirgt das Bild, wenn Sie darauf klicken:

.thumbnail:active span {
    visibility: hidden;
}

Ich hatte ein Problem mit einem Element, das beim Schweben ROT und beim Klicken BLAU BLAU sein musste. Um dies mit CSS zu erreichen, benötigen Sie zum Beispiel:

h1:hover { color: red; } 
h1:active { color: blue; }

<h1>This is a heading.</h1>

Ich kämpfte einige Zeit, bis ich herausfand, dass die Reihenfolge der CSS-Selektoren das Problem war, das ich hatte. Das Problem war, dass ich die Plätze gewechselt habe und der aktive Selektor nicht funktionierte. Dann fand ich heraus, dass :hoverich zuerst und dann gehen sollte :active.

Sie können verwenden: Ziel

für allgemeines Ziel

:Ziel

oder nach Klassennamen filtern

Klassenname: Ziel

oder nach ID-Namen filtern

#idname: Ziel

<style>

#id01:target {      
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
}

.msg{
    display:none;
}

.close{     
    color:white;        
    width: 2rem;
    height: 2rem;
    background-color: black;
    text-align:center;
    margin:20px;
}

</style>


<a href="#id01">Open</a>

<div id="id01" class="msg">    
    <a href="" class="close">&times;</a>
    <p>Some text. Some text. Some text.</p>
    <p>Some text. Some text. Some text.</p>
</div>