Tengo un elemento de imagen que quiero cambiar al hacer clic.

<img id="btnLeft">

Esto funciona:

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

Pero lo que necesito es:

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

Pero, no funciona, obviamente. ¿Es posible tener onclickcomportamiento en CSS (es decir, sin usar JavaScript)?

Lo más cercano que obtendrás es :active:

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

Sin embargo, esto solo aplicará el estilo cuando se mantenga presionado el botón del mouse. La única forma de aplicar un estilo y mantenerlo aplicado al hacer clic es usar un poco de JavaScript.

Respuesta a partir de 2019:

La mejor manera (en realidad, la única forma *) de simular un evento de clic real usando solo CSS (en lugar de simplemente pasar el cursor sobre un elemento o activar un elemento, donde no tiene mouseUp ) es usar el hack de la casilla de verificación. Funciona adjuntando labela un <input type="checkbox">elemento a través del for=""atributo de la etiqueta .

Esta característica tiene un amplio soporte de navegador (la :checkedpseudoclase es IE9 +).

Aplicar el mismo valor a un <input>atributo 's ID y un acompañamiento <label>' s for=""atributo, y se puede decir que el navegador re-estilo de la etiqueta de clic en la :checkedpseudo-clase, gracias al hecho de que al hacer clic una etiqueta comprobará y desactive la "asociado" <input type="checkbox">.

* Se puede simular un evento "seleccionado" a través de la :activeo :focuspseudo-clase en IE7 + (por ejemplo, para un botón que normalmente es 50pxamplia, puede cambiar su anchura, mientras que active: #btnControl:active { width: 75px; }), pero los que no son verdad "clic" eventos. Están "en vivo" todo el tiempo que se selecciona el elemento (por ejemplo, haciendo Tabbing con su teclado), que es un poco diferente de un evento de clic verdadero, que activa una acción, generalmente mouseUp.

Demostración básica del truco de la casilla de verificación (la estructura básica del código para lo que está pidiendo):

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>

Aquí he colocado la etiqueta justo después de la entrada en mi marcado. Esto es para que pueda usar el selector de hermanos adyacentes (la +tecla) para seleccionar solo la etiqueta que sigue inmediatamente a mi #democasilla de verificación. Dado que la :checkedpseudoclase se aplica a la casilla de verificación, #demo:checked + labelsolo se aplicará cuando la casilla de verificación esté marcada.

Demostración para cambiar el tamaño de una imagen al hacer clic, que es lo que está preguntando:

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

Con eso se dice, no es una mala noticia. Debido a que una etiqueta solo puede asociarse con un control de formulario a la vez , eso significa que no puede soltar un botón dentro de las <label></label>etiquetas y llamarlo por día. Sin embargo, nosotros podemos usar un poco de CSS para hacer la mirada etiqueta y se comportan bastante cerca de cómo un botón HTML parece y se comporta.

Demostración para imitar un efecto de clic de botón, más allá de lo que está pidiendo:

#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 mayor parte del CSS en esta demostración es solo para diseñar el elemento de etiqueta. Si realmente no necesita un botón , y cualquier elemento antiguo será suficiente, puede eliminar casi todos los estilos en esta demostración, similar a mi segunda demostración anterior.

También se dará cuenta que tengo una propiedad fija allí, -moz-outline-radius. Hace un tiempo, Mozilla agregó esta increíble propiedad no especificada a Firefox, pero la gente de WebKit decidió que , por desgracia, no la agregarán . Considere que la línea de CSS es solo una mejora progresiva para las personas que usan Firefox.

Puede usar la pseudo clase :targetpara imitar un evento de clic, déjeme darle un ejemplo.

#something {
  display: none;
}

#something:target {
  display: block;
}

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

Así es como se ve: http://jsfiddle.net/TYhnb/

Una cosa a tener en cuenta, esto solo se limita al hipervínculo, por lo que si necesita usar otro que no sea el hipervínculo, como un botón, es posible que desee piratearlo un poco, como diseñar un hipervínculo para que parezca un botón.

Si le das al elemento a, tabindexentonces puedes usar la :focuspseudo clase para simular un clic.

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/

Editar: Respondió antes de que OP aclarara lo que quería. Lo siguiente es para un onclick similar a javascripts onclick, no la :activepseudo clase.

Esto solo se puede lograr con Javascript o Checkbox Hack

El truco de la casilla de verificación esencialmente hace que haga clic en una etiqueta, que "marca" una casilla de verificación, lo que le permite diseñar la etiqueta como desee.

La demo

TylerH hizo una muy buena respuesta, y solo tuve que actualizar esa última versión del botón.

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

¿Qué tal una solución CSS pura sin ser (que) hacky?

.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 tiene una gran respuesta pero es una solución bastante compleja. Tengo una solución para aquellos de ustedes que solo quieren un simple efecto "onclick" con CSS puro sin un montón de elementos adicionales.

Simplemente usaremos transiciones CSS. Probablemente podrías hacer algo similar con las animaciones.

El truco consiste en cambiar el retraso de la transición para que dure cuando el usuario hace clic.

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

Aquí agrego también la clase "clics" para que JavaScript también pueda proporcionar el efecto si es necesario. Uso el filtro de sombra paralela 0px porque resaltará el gráfico azul transparente dado de esta manera para mi caso.

Tengo un filtro a 0s aquí para que no surta efecto. Cuando se libera el efecto, puedo agregar la transición con un retraso para que proporcione un buen efecto de "clic".

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

Esto me permite configurarlo para que cuando el usuario haga clic en el botón, se resalte en azul y luego se desvanezca lentamente (por supuesto, también podría usar otros efectos).

Si bien está limitado aquí en el sentido de que la animación para resaltar es instantánea, aún proporciona el efecto deseado. Probablemente podría usar este truco con animación para producir una transición general más suave.

De acuerdo, esta quizás sea una publicación antigua ... pero fue el primer resultado en Google y decidió hacer su propia mezcla sobre esto como ...

PRIMERO UTILIZARÉ FOCUS

La razón de esto es que funciona bien para el ejemplo que estoy mostrando, si alguien quiere un evento de tipo mouse down, use active

EL CÓDIGO HTML:

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

EL CÓDIGO 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/

Entonces, ¿por qué estoy publicando esto en un hilo antiguo? Bueno, porque los ejemplos aquí varían y pensé en devolver uno a la comunidad, que es un ejemplo de trabajo.

Como ya respondió el creador del hilo, solo quieren que el efecto dure durante el evento de clic. Ahora, si bien esto no es exacto para esa necesidad, está cerca. active se animará mientras el mouse esté presionado y cualquier cambio que necesite que dure más tiempo debe hacerse con javascript.

¡Advertencia! Particularmente simple respuesta a continuación! :)

En realidad, puede tener un cambio que persiste (como un bloque / ventana emergente que aparece y permanece visible después de un clic) con solo CSS (y sin usar el hack de la casilla de verificación) a pesar de lo que muchas de las respuestas (de lo contrario correctas) aquí reclaman, siempre ya que solo necesitas persistencia durante el vuelo estacionario.

Así que eche un vistazo a las respuestas de Bojangles y TylerH si funcionan para usted, pero si desea una respuesta simple y CSS que mantendrá un bloque visible después de hacer clic (e incluso puede hacer que el bloque desaparezca con un clic de seguimiento), luego Mira esta solución.

Tuve una situación similar, necesitaba un div emergente con onClick donde no podía agregar ningún JS o cambiar el marcado / HTML (una verdadera solución CSS) y esto es posible con algunas advertencias. No puede usar el truco: target que puede crear una buena ventana emergente a menos que pueda cambiar el HTML (para agregar un 'id') para que quede fuera.

En mi caso, el div emergente estaba contenido dentro del otro div, y quería que apareciera encima del otro div, y esto se puede hacer usando una combinación de: active y: 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;
}

Ejemplo (así como uno que permite hacer clic en la ventana emergente para hacerla desaparecer) en:

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

También he insertado un ejemplo de fragmento de código a continuación, pero el posicionamiento en el entorno limitado de stackoverflow es extraño, así que tuve que poner el texto 'haga clic aquí' después del innerDiv, que normalmente no es necesario.

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

Tengo el siguiente código para pasar el mouse y hacer clic con el mouse y funciona:

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

y este código oculta la imagen cuando haces clic en ella:

.thumbnail:active span {
    visibility: hidden;
}

Tuve un problema con un elemento que tenía que ser de color ROJO al pasar el mouse y ser AZUL al hacer clic mientras se pasa el cursor. Para lograr esto con css necesita, por ejemplo:

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

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

Luché por un tiempo hasta que descubrí que el orden de los selectores de CSS era el problema que tenía. El problema fue que cambié los lugares y el selector activo no funcionaba. Entonces descubrí que :hoverir primero y luego :active.

puedes usar: target

para objetivo general

:objetivo

o filtrar por nombre de clase

.classname: target

o filtrar por nombre de identificación

#idname: target

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