Posso avere un effetto onclick nei CSS?

Ho un elemento immagine che voglio modificare al clic.

Ma, non funziona, ovviamente. È ansible avere un comportamento onclick in CSS (cioè senza usare JavaScript)?

Il più vicino che otterrai è :active :

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

Tuttavia, si applica lo stile solo quando si tiene premuto il pulsante del mouse. L’unico modo per applicare uno stile e tenerlo applicato su onclick è usare un po ‘di JavaScript.

2018 Risposta:

Il modo migliore (in realtà l’unico modo *) per simulare un evento di clic effettivo utilizzando solo CSS (anziché passare il mouse su un elemento o rendere attivo un elemento, in cui non si ha mouseUp ) è utilizzare la casella di controllo hack. Funziona collegando label a un elemento tramite l’attributo for="" dell’etichetta.

Questa funzione ha un ampio supporto per i browser (la pseudo-class :checked è IE9 +).

Applica lo stesso valore all’attributo ID di e un attributo accompagnamento for="" , e puoi dire al browser di ridisegnare l’etichetta al clic con la pseudo-class :checked , grazie al fatto che facendo clic su un’etichetta controllerà e deselezionerà la casella “associata” .

* Puoi simulare un evento “selezionato” tramite la pseudo-class :active o :focus in IE7 + (ad esempio per un pulsante che è generalmente largo 50px , puoi modificarne la larghezza mentre è active : #btnControl:active { width: 75px; } ) , ma quelli non sono veri eventi di “clic”. Sono “live” per tutto il tempo in cui l’elemento viene selezionato (come ad esempio Tab bing con la tastiera), che è leggermente diverso da un vero evento click, che triggers un’azione – tipicamente – mouseUp .


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

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

Puoi usare pseudo class :target per imitare l’evento click, lascia che ti dia un esempio.

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

Se assegni all’elemento un tabindex , puoi utilizzare la pseudo class :focus per simulare un clic.

HTML

  

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 alla pseudo class :active .

Questo può essere ottenuto solo con Javascript o con il Checkbox Hack

Il checkbox hack ti fa essenzialmente cliccare su un’etichetta, che “controlla” una casella di controllo, permettendoti di modellare l’etichetta come desideri.

La demo

TylerH ha fatto una buona risposta, e ho dovuto dare l’aggiornamento dell’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; } 
   

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

PRIMO UTILIZZO FOCUS

La ragione di questo è che funziona bene per l’esempio che sto mostrando, se qualcuno vuole un evento di tipo mouse down quindi usa active

IL CODICE HTML:

     

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 postando questo in un thread vecchio, bene perché gli esempi qui variano e ho pensato di fornire uno indietro 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 quella necessità, è vicino. active si animerà mentre il mouse è inattivo e tutte le modifiche necessarie per durare più a lungo devono essere eseguite con javascript.

La risposta di Bojangles è generalmente corretta, tuttavia:

“L’unico modo per applicare uno stile e tenerlo applicato onclick è usare un po ‘di JavaScript”

Questo non è del tutto vero nel senso di mantenere il blocco visibile dopo il clic. Avevo 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 è ansible con alcune avvertenze. Non è ansible utilizzare il: trucco di destinazione che può creare un bel popup a meno che non sia ansible modificare l’HTML (per aggiungere un ‘id’) in modo che fosse fuori.

Nel mio caso il popup pop era contenuto all’interno dell’altro div, e volevo che il popup apparisse 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 sparire) a:

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

inserisci la descrizione dell'immagine qui

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

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 si fa clic su di esso:

 .thumbnail:active span { visibility: hidden; } 

Ho avuto un problema con un elemento che doveva essere colorato in ROSSO al passaggio del mouse e essere BLU al clic mentre si librava. Per ottenere questo con css hai bisogno per esempio:

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

This is a heading.

Ho faticato 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 posizione e il selettore attivo non funzionava. Poi ho scoperto che :hover passa al primo posto e poi :active .