Kann ich einen Onclick-Effekt in CSS haben?

Ich habe ein Bildelement, das ich beim Klick ändern möchte.

Aber offensichtlich funktioniert es nicht. Ist es überhaupt möglich, onclick Verhalten in CSS zu haben (dh ohne JavaScript zu verwenden)?

   

Der nächste, den Sie bekommen, ist :active :

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

Dies wird jedoch nur angewendet, wenn die Maustaste gedrückt wird. Die einzige Möglichkeit, einen Stil anzuwenden und den Onclick anzuwenden, besteht darin, ein wenig JavaScript zu verwenden.

2018 Antwort:

Der beste Weg (eigentlich die einzige Möglichkeit *), ein tatsächliches Klickereignis nur mit CSS zu simulieren (statt nur auf einem Element zu schweben oder ein Element aktiv zu machen, wo Sie nicht mouseUp haben ), ist das checkbox hack. Es funktioniert, indem Sie ein label an ein Element über das Attribut des Labels for="" anhängen.

Diese function hat eine breite Browser-Unterstützung (die :checked Pseudo-class ist IE9 +).

Wenden Sie den gleichen Wert auf das ID-Attribut einer und das zugehörige Attribut for="" , und Sie können den Browser anweisen, die Beschriftung bei Klick mit der Pseudo-class :checked formatieren, danke zu dem Fakt, dass das Klicken auf ein Label das “zugehörige” aktiviert und deaktiviert.

* Sie können ein “ausgewähltes” Ereignis über die 50px :active oder :focus in IE7 + simulieren (zB für eine Schaltfläche, die normalerweise 50px breit ist, können Sie ihre Breite ändern, während sie active : #btnControl:active { width: 75px; } ) , aber das sind keine wahren “Klick” -Ereignisse. Sie sind die ganze Zeit “live”, wenn das Element ausgewählt wird (z. B. durch Tab bing mit Ihrer Tastatur), was sich etwas von einem echten mouseUp unterscheidet, das eine Aktion auf – normalerweise – mouseUp .


Grundlegende Demo des Checkbox-Hacks (die grundlegende Code-Struktur für das, was Sie fragen):

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

Sie können pseudo class :target , um auf Click-Ereignis zu imitieren, lassen Sie mich Ihnen ein Beispiel geben.

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

Wenn Sie dem Element einen tabindex , können Sie die tabindex :focus , um einen Klick zu simulieren.

HTML

  

CSS

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

http://jsfiddle.net/NaTj5/

Edit: Beantwortet, bevor OP geklärt hat, was er wollte. Das Folgende ist für einen onclick ähnlich wie javascripts onclick, nicht die :active pseudo class.

Dies kann nur mit Javascript oder dem Checkbox Hack erreicht werden

Der Checkbox-Hack bringt Sie dazu, auf ein Label zu klicken, das ein Kontrollkästchen “checkt” und Ihnen erlaubt, das Label nach Ihren Wünschen zu gestalten.

Die Demo

TylerH hat eine wirklich gute Antwort gegeben, und ich musste der letzten Knopfversion nur ein Update geben.

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

Okay, das ist vielleicht ein alter Post … aber war das erste Ergebnis in Google und hat beschlossen, deinen eigenen Mix auf diesem als ..

Erstens werde ich Fokus verwenden

Der Grund dafür ist, dass es gut für das Beispiel funktioniert, das ich zeige, wenn jemand ein mouse-down-type-Event möchte, dann aktiv

Der HTML-Code:

     

DER CSS-CODE:

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

Also, warum poste ich das in einem alten Thread, nun, weil die Beispiele hier variieren und ich dachte, ich würde der Community, die ein funktionierendes Beispiel ist, einen zurückgeben.

Wie bereits vom Ersteller des Threads beantwortet, möchten sie nur, dass der Effekt während des Klickereignisses anhält. Nun, während dies für diese Notwendigkeit nicht genau ist, ist es nahe. active wird animiert, während die Maus inaktiv ist und alle Änderungen, die Sie länger brauchen, müssen mit JavaScript durchgeführt werden.

Bojangles Antwort ist jedoch im Allgemeinen richtig:

“Die einzige Möglichkeit, einen Stil anzuwenden und den angewandten Klick beizubehalten, ist die Verwendung von ein wenig JavaScript”

Dies ist in dem Sinne nicht ganz richtig, dass der Block nach dem Klick sichtbar bleibt. Ich hatte eine ähnliche Situation, ich brauchte ein Popup-div mit onClick, wo ich kein JS hinzufügen oder das Markup / HTML (eine echte CSS-Lösung) ändern konnte und dies ist mit einigen Vorbehalten möglich. Sie können nicht den: target-Trick verwenden, der ein nettes Popup erstellen kann, es sei denn, Sie können den HTML-Code ändern (um eine ‘id’ hinzuzufügen), so dass er aus war.

In meinem Fall war das Popup-Div in dem anderen Div enthalten, und ich wollte, dass das Popup über dem anderen Div angezeigt wird, und dies kann mit einer Kombination von: active und: hover geschehen:

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

Beispiel (sowie eines, das das Klicken auf das Popup ermöglicht, um es verschwinden zu lassen) bei:

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

Bildbeschreibung hier eingeben

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

Ich habe den folgenden Code für den Mauszeiger und Mausklick und es funktioniert:

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

und dieser Code verbirgt das Bild, wenn Sie darauf klicken:

 .thumbnail:active span { visibility: hidden; } 

Ich hatte ein Problem mit einem Element, das beim Schweben ROT gefärbt sein musste und beim Klicken während des Schwebens BLAU sein sollte. Um dies mit CSS zu erreichen, benötigen Sie zum Beispiel:

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

This is a heading.

Ich kämpfte für einige Zeit, bis ich entdeckte, dass die Reihenfolge der CSS-Selektoren das Problem war, das ich hatte. Das Problem war, dass ich die Plätze wechselte und der aktive Selektor nicht funktionierte. Dann habe ich herausgefunden :hover zuerst und dann :active .