Ho un elemento immagine che voglio cambiare al clic.

<img id="btnLeft">

Questo funziona:

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

Ma quello di cui ho bisogno è:

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

Ma non funziona, ovviamente. È possibile avere un onclickcomportamento nei CSS (cioè senza usare JavaScript)?

Il più vicino che otterrai è :active:

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

Tuttavia, questo applicherà lo stile solo quando si tiene premuto il pulsante del mouse. L'unico modo per applicare uno stile e mantenerlo applicato al clic è utilizzare un po 'di JavaScript.

Risposta a partire dal 2019:

Il modo migliore (in realtà l'unico modo *) per simulare un evento di clic effettivo utilizzando solo CSS (anziché passare con il mouse su un elemento o renderlo attivo, in cui non si dispone di mouseUp ) è utilizzare l'hack della casella di controllo. Funziona collegando labela un <input type="checkbox">elemento tramite l' for=""attributo dell'etichetta .

Questa funzione ha un ampio supporto per il browser (la :checkedpseudo-classe è IE9 +).

Applicare lo stesso valore di un <input>attributo 's ID e di un accompagnamento <label>' s for=""attributi, e si può dire al browser di ri-stile l'etichetta sul click con il :checkedpseudo-classe, grazie al fatto che cliccando un'etichetta controllerà e deselezionare la "associato" <input type="checkbox">.

* È possibile simulare un evento "selezionato" tramite la :activeo :focuspseudo-classe in IE7 + (ad esempio per un pulsante che di solito 50pxlarga, è possibile modificare la larghezza, mentre active: #btnControl:active { width: 75px; }), ma quelli non sono vere "click" eventi. Sono "attivi" per tutto il tempo in cui l'elemento è selezionato (ad esempio Tabbing con la tastiera), che è un po 'diverso da un evento di clic reale, che attiva un'azione - in genere - mouseUp.

Demo di base dell'hack della casella di controllo (la struttura del codice di base per quello che stai chiedendo):

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>

Qui ho posizionato l'etichetta subito dopo l'input nel mio markup. Questo è così che posso usare il selettore di fratelli adiacenti (il +tasto) per selezionare solo l'etichetta che segue immediatamente la mia #democasella di controllo. Poiché la :checkedpseudo-classe si applica alla casella di controllo, #demo:checked + labelverrà applicata solo quando la casella di controllo è selezionata.

Demo per ridimensionare un'immagine al clic, che è quello che stai chiedendo:

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

Detto questo, ci sono alcune cattive notizie. Poiché un'etichetta può essere associata a un solo controllo modulo alla volta , ciò significa che non è possibile rilasciare un pulsante all'interno dei <label></label>tag e chiamarlo un giorno. Tuttavia, siamo in grado di utilizzare alcuni CSS per rendere il look dell'etichetta e si comportano abbastanza vicino al modo in cui un pulsante HTML aspetto e il comportamento.

Demo per imitare un effetto clic sul pulsante, sopra e oltre ciò che stai chiedendo:

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

La maggior parte dei CSS in questa demo è solo per lo stile dell'elemento etichetta. Se in realtà non hai bisogno di un pulsante e qualsiasi vecchio elemento sarà sufficiente, puoi rimuovere quasi tutti gli stili in questa demo, simile alla mia seconda demo sopra.

Noterai anche che ho una proprietà con prefisso lì dentro -moz-outline-radius. Qualche tempo fa, Mozilla ha aggiunto questa straordinaria proprietà non specifica a Firefox, ma la gente di WebKit ha deciso di non aggiungerla , sfortunatamente. Quindi considera quella linea di CSS solo un miglioramento progressivo per le persone che usano Firefox.

Puoi usare la pseudo classe :targetper imitare l'evento click, lascia che ti dia un esempio.

#something {
  display: none;
}

#something:target {
  display: block;
}

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

Ecco come appare: http://jsfiddle.net/TYhnb/

Una cosa da notare, questo è limitato solo al collegamento ipertestuale, quindi se è necessario utilizzarlo su un collegamento ipertestuale, ad esempio un pulsante, è possibile modificarlo un po ', come ad esempio lo stile di un collegamento ipertestuale per assomigliare a un pulsante.

Se dai un elemento a tabindexallora puoi usare la :focuspseudo classe per simulare un clic.

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/

Modifica: risposta prima che OP chiarisse ciò che voleva. Quanto segue è per un onclick simile a javascripts onclick, non la :activepseudo classe.

Questo può essere ottenuto solo con Javascript o Checkbox Hack

L'hack della casella di controllo ti consente essenzialmente di fare clic su un'etichetta, che "seleziona" una casella di controllo, consentendoti di modellare l'etichetta come desideri.

La demo

TylerH ha fatto un'ottima risposta, e ho dovuto solo dare un aggiornamento all'ultima versione del pulsante.

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

Che ne dici di una soluzione CSS pura senza essere (quello) disordinato?

.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 ha un'ottima risposta ma è una soluzione piuttosto complessa. Ho una soluzione per quelli di voi che vogliono solo un semplice effetto "onclick" con puro CSS senza un mucchio di elementi extra.

Useremo semplicemente le transizioni CSS. Probabilmente potresti fare lo stesso con le animazioni.

Il trucco è cambiare il ritardo per la transizione in modo che duri quando l'utente fa clic.

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

Qui aggiungo anche la classe "cliccata" in modo che javascript possa anche fornire l'effetto se necessario. Uso il filtro ombreggiatura 0px perché evidenzierà il dato blu grafico trasparente in questo modo per il mio caso.

Ho un filtro a 0s qui in modo che non abbia effetto. Quando l'effetto viene rilasciato, posso quindi aggiungere la transizione con un ritardo in modo che fornisca un piacevole effetto "cliccato".

.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;
}

Questo mi permette di impostarlo in modo tale che quando l'utente fa clic sul pulsante, si evidenzia in blu per poi svanire lentamente (è possibile, naturalmente, utilizzare anche altri effetti).

Mentre sei limitato qui, nel senso che l'animazione da evidenziare è istantanea, fornisce comunque l'effetto desiderato. Probabilmente potresti usare questo trucco con l'animazione per produrre una transizione generale più fluida.

Ok, questo forse è un vecchio post ... ma è stato il primo risultato in google e ho deciso di creare il tuo mix su questo come ..

PRIMA UTILIZZER F FOCUS

La ragione di ciò è che funziona bene per l'esempio che sto mostrando, se qualcuno vuole un evento di tipo down del mouse allora usa active

IL CODICE HTML:

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

IL CODICE CSS:

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

Quindi, perché sto pubblicando questo in un vecchio thread, beh, perché gli esempi qui variano e ho pensato di fornirne uno alla comunità, che è un esempio funzionante.

Come già risposto dal creatore del thread, vogliono solo che l'effetto duri durante l'evento click. Ora, mentre questo non è esatto per tale esigenza, è vicino. attivo si animerà mentre il mouse è inattivo e tutte le modifiche necessarie per durare più a lungo devono essere eseguite con JavaScript.

Avvertimento! Di seguito una risposta particolarmente semplice! :)

In realtà puoi avere una modifica che persiste (come un blocco / popup che appare e rimane visibile dopo un clic) con solo CSS (e senza usare l'hacking della casella di controllo) nonostante ciò che molte delle risposte (altrimenti corrette) qui sostengono, purché poiché hai bisogno di persistenza solo durante il passaggio del mouse.

Quindi dai un'occhiata alle risposte di Bojangles e TylerH se funzionano per te, ma se vuoi una risposta semplice e CSS che manterrà un blocco visibile dopo essere stato cliccato (e può anche far sparire il blocco con un clic di follow-up), quindi vedi questa soluzione.

Ho avuto una situazione simile, avevo bisogno di un div popup con onClick in cui non potevo aggiungere alcun JS o modificare il markup / HTML (una vera soluzione CSS) e questo è possibile con alcuni avvertimenti. Non puoi usare il trucco: target che può creare un bel popup a meno che tu non possa cambiare l'HTML (per aggiungere un 'id') in modo che non esistesse.

Nel mio caso il div popup era contenuto all'interno dell'altro div e volevo che il popup comparisse sopra l'altro div, e questo può essere fatto usando una combinazione di: active e: hover:

/* 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;
}

Esempio (oltre a quello che consente di fare clic sul popup per farlo scomparire) su:

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

Ho anche inserito un esempio di frammento di codice di seguito, ma il posizionamento nella sandbox dello stackoverflow è strano, quindi ho dovuto inserire il testo "fai clic qui" dopo il innerDiv, che normalmente non è necessario.

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

Ho il seguente codice per il passaggio del mouse e il clic del mouse e funziona:

//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%;
}

e questo codice nasconde l'immagine quando fai clic su di essa:

.thumbnail:active span {
    visibility: hidden;
}

Ho avuto un problema con un elemento che doveva essere colorato di ROSSO al passaggio del mouse ed essere BLU al clic durante il passaggio del mouse. Per raggiungere questo obiettivo con css è necessario ad esempio:

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

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

Ho lottato per qualche tempo fino a quando ho scoperto che l' ordine dei selettori CSS era il problema che stavo avendo. Il problema era che ho cambiato posto e il selettore attivo non funzionava. Poi ho scoperto che :hoverprima andava e poi :active.

puoi usare: target

per obiettivo generale

:bersaglio

o filtra per nome della classe

.classname: bersaglio

o filtra per nome ID

#idname: bersaglio

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