Posso ter um efeito onclick no CSS?

Eu tenho um elemento de imagem que eu quero alterar no clique.

Mas, não funciona, obviamente. É possível ter algum comportamento onclick em CSS (ou seja, sem usar JavaScript)?

O mais próximo que você vai conseguir é :active :

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

No entanto, isso só aplicará o estilo quando o botão do mouse estiver pressionado. A única maneira de aplicar um estilo e mantê-lo onclick aplicado é usar um pouco de JavaScript.

2018 Resposta:

A melhor maneira (na verdade, a única maneira *) de simular um evento de clique real usando apenas CSS (em vez de apenas pairar sobre um elemento ou tornar um elemento ativo, onde você não tem mouseUp ) é usar o checkbox hack. Ele funciona anexando um label a um elemento através do atributo label for="" .

Esse recurso tem amplo suporte a navegadores (a pseudo-class :checked é IE9 +).

Aplique o mesmo valor a um atributo de ID de e um atributo de for="" , e você pode dizer ao navegador para reformular o label ao clicar com a pseudo-class :checked , obrigado ao fato de que clicar em um label irá marcar e desmarcar a checkbox de seleção “associada” .

* Você pode simular um evento “selecionado” através da pseudo-class :active ou :focus no IE7 + (por exemplo, para um botão que normalmente tem 50px largura, você pode alterar sua largura enquanto active : #btnControl:active { width: 75px; } ) , mas esses não são verdadeiros “clique” events. Eles estão “ativos” o tempo todo em que o elemento é selecionado (por exemplo, por Tabging com o teclado), o que é um pouco diferente de um evento de clique real, que aciona uma ação em – geralmente – mouseUp .


Demonstração básica do checkbox hack (a estrutura básica do código para o que você está perguntando):

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

Você pode usar pseudo class :target para imitar no evento click, deixe-me dar um exemplo.

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

Se você der ao elemento um tabindex , poderá usar a class pseudo :focus para simular um clique.

HTML

  

CSS

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

http://jsfiddle.net/NaTj5/

Edit: Respondido antes OP esclareceu o que ele queria. O seguinte é para um onclick similar ao javascripts onclick, não à :active pseudo-class :active .

Isso só pode ser conseguido com Javascript ou o Hack de Caixa de Seleção.

O checkbox hack essencialmente faz com que você clique em um label, que “verifica” uma checkbox de seleção, permitindo que você estilize o label como desejar.

A demonstração

TylerH fez uma resposta muito boa, e eu só tive que dar uma última atualização no último botão.

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

Ok, isso talvez seja um post antigo … mas foi o primeiro resultado no google e resolvi fazer sua própria mixagem sobre isso como ..

PRIMEIRAMENTE, VOU USAR O FOCO

A razão para isso é que ele funciona bem para o exemplo que estou mostrando, se alguém quiser um evento do tipo “mouse down”, use o active

O CÓDIGO HTML:

     

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

Então, por que estou postando isso em um segmento antigo, bem, porque os exemplos aqui variam e eu pensei em fornecer um de volta para a comunidade, que é um exemplo de trabalho.

Como já foi respondido pelo criador do thread, eles querem apenas que o efeito dure durante o evento click. Agora, enquanto isso não é exato para essa necessidade, está próximo. O ativo irá animar enquanto o mouse estiver inativo e quaisquer alterações que você precise ter mais tempo precisam ser feitas com o javascript.

A resposta de Bojangles é geralmente correta, no entanto:

“A única maneira de aplicar um estilo e mantê-lo onclick aplicado é usar um pouco de JavaScript”

Isso não é bem verdade no sentido de manter o bloco visível após o clique. Eu tive uma situação parecida, eu precisei de um popup div com o onClick onde eu não pude adicionar nenhum JS ou mudar o markup / HTML (uma solução verdadeiramente CSS) e isso é possível com algumas ressalvas. Você não pode usar o truque: target que pode criar um popup bonito, a menos que você possa mudar o HTML (para adicionar um ‘id’) de modo que ele esteja fora.

No meu caso, o popup div estava contido dentro do outro div, e eu queria que o pop-up aparecesse no topo do outro div, e isso pode ser feito usando uma combinação de: 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; } 

Exemplo (assim como aquele que permite clicar no pop-up para fazê-lo desaparecer) em:

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

insira a descrição da imagem aqui

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

Eu tenho o código abaixo para mouse hover e clique do mouse e 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%; } 

e este código esconde a imagem quando você clica nela:

 .thumbnail:active span { visibility: hidden; } 

Eu tive um problema com um elemento que tinha que ser colorido em VERMELHO e ser AZUL no clique enquanto estava sendo observado. Para conseguir isso com css você precisa, por exemplo:

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

This is a heading.

Lutei por algum tempo até descobrir que a ordem dos seletores CSS era o problema que eu estava tendo. O problema era que eu troquei os lugares e o seletor ativo não estava funcionando. Então eu descobri que :hover para ir primeiro e depois :active .