¿Puedo tener un efecto de clic en CSS?

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

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

Lo más cerca que obtendrá 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.

2018 Respuesta:

La mejor manera (de hecho, la única forma *) de simular un evento de clic real utilizando solo CSS (en lugar de simplemente colocar el cursor sobre un elemento o hacer que un elemento sea activo, donde no tiene mouseUp ) es usar el hack de checkbox. Funciona adjuntando una label a un elemento mediante el atributo for="" la etiqueta.

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

Aplique el mismo valor al atributo de ID de una y al atributo ‘s for="" acompaña, y puede decirle al navegador que vuelva a modificar la etiqueta al hacer clic con la pseudoclase :checked , gracias al hecho de que al hacer clic en una etiqueta se verificará y desmarcará la checkbox “asociada” .

* Puede simular un evento “seleccionado” a través de :active pseudo-clase :active o :focus en IE7 + (por ejemplo, para un botón que normalmente tiene 50px ancho, puede cambiar su ancho mientras está active : #btnControl:active { width: 75px; } ) , pero esos no son verdaderos eventos de “clic”. Están “en vivo” todo el tiempo que se selecciona el elemento (por ejemplo, mediante Tabulación con el teclado), que es un poco diferente de un evento de clic verdadero, que activa una acción, típicamente, mouseUp .


Demostración básica del hack de checkbox (la estructura de código básica para lo que estás preguntando):

 label { display: block; background: lightgrey; width: 100px; height: 100px; } #demo:checked + label { background: blue; color: white; } 
   

Puedes usar pseudo clase :target para imitar al hacer clic en evento, permíteme darte un ejemplo.

 #something { display: none; } #something:target { display: block; } 
 Show 
Bingo!

Si le da al elemento un tabindex , puede usar la tabindex :focus para simular un clic.

HTML

  

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 click similar al javascripts onclick, no a la :active pseudoclase :active .

Esto solo se puede lograr con JavaScript o con el Checkbox Hack

El truco de la checkbox esencialmente hace que haga clic en una etiqueta, que “marca” una checkbox, lo que le permite darle un estilo a la etiqueta como desee.

La demo

TylerH hizo una muy buena respuesta, y solo tuve que darle una actualización a 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; } 
   

De acuerdo, esta puede ser una publicación anterior … pero fue el primer resultado en google y decidí hacer tu propia mezcla sobre esto como …

PRIMERO USO EL ENFOQUE

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

EL CÓDIGO HTML

     

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 viejo, 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 de subprocesos, solo quieren que el efecto dure durante el evento de clic. Ahora bien, aunque esto no es exacto para esa necesidad, está cerca. active se animará mientras el mouse esté hacia abajo y cualquier cambio que necesite durar más debe hacerse con javascript.

La respuesta de Bojangles es generalmente correcta, sin embargo:

“La única forma de aplicar un estilo y mantenerlo aplicado en clics es usar un poco de JavaScript”

Esto no es del todo cierto en el sentido de mantener el bloque visible después del clic. 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 de destino que puede crear una ventana emergente agradable a menos que pueda cambiar el HTML (para agregar un ‘id’) para que no se muestre.

En mi caso, el div emergente estaba dentro del otro div, y quería que el popup 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 que desaparezca) en:

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

enter image description here

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

Tengo el siguiente código para el mouse y 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 estaba suspendido. Para lograr esto con CSS, necesita por ejemplo:

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

This is a heading.

Luché por un tiempo hasta que descubrí que el orden de los selectores de CSS era el problema que estaba teniendo. El problema fue que cambié los lugares y el selector activo no funcionaba. Luego descubrí eso :hover para ir primero y luego :active .