Saya memiliki elemen gambar yang ingin saya ubah saat klik.

<img id="btnLeft">

Ini bekerja:

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

Tapi yang saya butuhkan adalah:

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

Tapi, tentu saja itu tidak berhasil. Apakah mungkin memiliki onclickperilaku dalam CSS (yaitu tanpa menggunakan JavaScript)?

Yang paling dekat Anda akan dapatkan adalah :active:

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

Namun ini hanya akan berlaku gaya ketika tombol mouse ditekan. Satu-satunya cara untuk menerapkan gaya dan tetap menerapkannya pada klik adalah dengan menggunakan sedikit JavaScript.

Jawab pada 2019:

Cara terbaik (sebenarnya satu-satunya cara *) untuk mensimulasikan acara klik yang sebenarnya hanya menggunakan CSS (bukan hanya melayang pada elemen atau membuat elemen aktif, di mana Anda tidak memiliki mouseUp ) adalah dengan menggunakan kotak centang hack. Ia bekerja dengan melampirkan labelke <input type="checkbox">elemen melalui label for=""atribut.

Fitur ini memiliki dukungan browser yang luas (kelas :checkedsemu adalah IE9 +).

Terapkan nilai yang sama ke <input> 's atribut ID dan menyertai <label>' s for=""atribut, dan Anda dapat memberitahu browser untuk re-gaya label di klik dengan :checkedpseudo-class, berkat fakta bahwa mengklik label akan memeriksa dan hapus centang pada "terkait" <input type="checkbox">.

* Anda dapat mensimulasikan peristiwa "terpilih" melalui kelas :activeatau :focussemu di IE7 + (mis. Untuk tombol yang biasanya 50pxlebar, Anda dapat mengubah lebarnya saatactive : #btnControl:active { width: 75px; }), tetapi mereka tidak benar "klik" peristiwa. Mereka "hidup" sepanjang waktu elemen dipilih (seperti Tabdengan menggunakan keyboard Anda), yang sedikit berbeda dari peristiwa klik yang sebenarnya, yang mengaktifkan aksi - biasanya - mouseUp.

Demo dasar hack kotak centang (struktur kode dasar untuk apa yang Anda minta):

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>

Di sini saya telah menempatkan label tepat setelah input di markup saya. Ini agar saya dapat menggunakan pemilih saudara yang berdekatan (+ tombol) untuk memilih hanya label yang langsung mengikuti #demokotak centang saya . Karena :checkedpseudo-class berlaku untuk kotak centang, #demo:checked + labelhanya akan berlaku ketika kotak centang dicentang.

Demo untuk mengubah ukuran gambar pada klik, yang Anda tanyakan:

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

Dengan itu dikatakan, ada adalah kabar buruk. Karena label hanya dapat dikaitkan dengan satu kontrol formulir pada satu waktu , itu berarti Anda tidak bisa begitu saja meletakkan tombol di dalamnya<label></label> tag dan menyebutnya sehari. Namun, kita dapat menggunakan beberapa CSS untuk membuat label terlihat dan berperilaku cukup dekat dengan bagaimana sebuah tombol HTML terlihat dan berperilaku.

Demo untuk meniru efek klik tombol, di atas dan di luar apa yang Anda minta:

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

Sebagian besar CSS dalam demo ini hanya untuk menata elemen label. Jika Anda tidak benar-benar membutuhkan tombol , dan elemen lama apa pun sudah cukup, maka Anda dapat menghapus hampir semua gaya dalam demo ini, mirip dengan demo kedua saya di atas.

Anda juga akan melihat saya memiliki satu properti awalan di sana -moz-outline-radius,. Beberapa waktu yang lalu, Mozilla menambahkan properti non-spek yang mengagumkan ini ke Firefox, tetapi orang-orang di WebKit memutuskan mereka tidak akan menambahkannya , sayangnya. Jadi pertimbangkan bahwa baris CSS hanyalah peningkatan progresif untuk orang yang menggunakan Firefox.

Anda dapat menggunakan pseudo class :targetuntuk meniru acara klik, izinkan saya memberi Anda sebuah contoh.

#something {
  display: none;
}

#something:target {
  display: block;
}

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

Begini tampilannya: http://jsfiddle.net/TYhnb/

Satu hal yang perlu diperhatikan, ini hanya terbatas pada hyperlink, jadi jika Anda perlu menggunakan selain hyperlink, seperti tombol, Anda mungkin ingin meretasnya sedikit, seperti menata hyperlink agar terlihat seperti tombol.

Jika Anda memberi elemen a tabindexmaka Anda dapat menggunakan :focuskelas pseudo untuk mensimulasikan klik.

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/

Sunting: Dijawab sebelum OP menjelaskan apa yang dia inginkan. Berikut ini untuk onclick yang mirip dengan javascripts onclick, bukan:active kelas pseudo.

Ini hanya dapat dicapai dengan Javascript atau Hack Kotak Centang

Retas kotak centang pada dasarnya membuat Anda mengklik label, yang "memeriksa" kotak centang, memungkinkan Anda untuk menata label seperti yang Anda inginkan.

The demo

TylerH membuat jawaban yang sangat bagus, dan saya hanya harus memberikan pembaruan versi tombol terakhir.

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

Bagaimana dengan solusi CSS murni tanpa menjadi (yang) meretas?

.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 memiliki respons yang hebat tetapi ini solusi yang cukup kompleks. Saya punya solusi bagi Anda yang hanya ingin efek "onclick" sederhana dengan css murni tanpa banyak elemen tambahan.

Kami hanya akan menggunakan transisi css. Anda mungkin dapat melakukan hal serupa dengan animasi.

Caranya adalah dengan mengubah penundaan untuk transisi sehingga akan bertahan saat pengguna mengklik.

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

Di sini saya menambahkan kelas "diklik" juga sehingga javascript juga dapat memberikan efek jika perlu. Saya menggunakan filter drop-shadow 0px karena akan menyorot biru transparan yang diberikan seperti ini untuk kasus saya.

Saya memiliki filter pada 0s di sini sehingga tidak akan berpengaruh. Ketika efek dilepaskan saya kemudian dapat menambahkan transisi dengan penundaan sehingga akan memberikan efek "diklik" yang bagus.

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

Ini memungkinkan saya untuk mengaturnya sehingga ketika pengguna mengklik tombol, itu menyoroti biru kemudian menghilang perlahan (Anda bisa, tentu saja, menggunakan efek lain juga).

Meskipun Anda terbatas di sini dalam arti bahwa animasi yang disoroti adalah instan, itu tetap memberikan efek yang diinginkan. Anda mungkin dapat menggunakan trik ini dengan animasi untuk menghasilkan transisi keseluruhan yang lebih mulus.

Oke, ini mungkin posting lama ... tetapi hasil pertama di google dan memutuskan untuk membuat campuran Anda sendiri pada ini sebagai ..

PERTAMA AKU AKAN MENGGUNAKAN FOKUS

Alasannya adalah ini berfungsi dengan baik untuk contoh yang saya tunjukkan, jika seseorang menginginkan acara tipe mouse kemudian gunakan aktif

KODE HTML:

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

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

Jadi mengapa saya memposting ini di utas lama, baik karena contoh di sini bervariasi dan saya pikir untuk memberikan satu kembali ke komunitas yang merupakan contoh kerja.

Seperti yang sudah dijawab oleh pembuat utas, mereka hanya ingin efeknya bertahan selama acara klik. Sekarang sementara ini tidak tepat untuk kebutuhan itu, itu dekat. aktif akan bernyawa saat mouse tidak aktif dan perubahan apa pun yang Anda perlukan lebih lama harus dilakukan dengan javascript.

Peringatan! Jawabannya sangat sederhana di bawah ini! :)

Anda sebenarnya dapat memiliki perubahan yang tetap ada (seperti blok / munculan yang muncul dan tetap terlihat setelah klik) dengan hanya CSS (dan tanpa menggunakan hack kotak centang) terlepas dari apa yang diklaim oleh banyak (jika tidak benar) jawaban di sini, selama karena Anda hanya perlu ketekunan selama melayang.

Jadi, lihat jawaban Bojangles dan TylerH jika jawaban itu cocok untuk Anda, tetapi jika Anda menginginkan jawaban sederhana dan hanya CSS yang akan membuat blok terlihat setelah diklik (dan bahkan dapat menghilangkan blok tersebut dengan tindak lanjut klik), maka lihat solusi ini.

Saya memiliki situasi yang serupa, saya memerlukan div popup dengan onClick di mana saya tidak dapat menambahkan JS atau mengubah markup / HTML (solusi yang benar-benar CSS) dan ini dimungkinkan dengan beberapa peringatan. Anda tidak dapat menggunakan: target trick yang dapat membuat popup yang bagus kecuali Anda dapat mengubah HTML (untuk menambahkan 'id') sehingga tidak ada.

Dalam kasus saya div popup terdapat di dalam div lain, dan saya ingin popup muncul di atas div lainnya, dan ini dapat dilakukan dengan menggunakan kombinasi: active dan: 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;
}

Contoh (dan juga yang memungkinkan mengklik popup untuk menghilangkannya) di:

http://davesource.com/Solutions/20150324.CSS-Hanya-Klik-to-Plikup-Div/

Saya juga memasukkan contoh potongan kode di bawah ini, tetapi posisi di sandbox stackoverflow aneh jadi saya harus meletakkan teks 'klik di sini' setelah innerDiv, yang biasanya tidak diperlukan.

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

Saya memiliki kode di bawah ini untuk mouse hover dan klik mouse dan berfungsi:

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

dan kode ini menyembunyikan gambar ketika Anda mengkliknya:

.thumbnail:active span {
    visibility: hidden;
}

Saya memiliki masalah dengan elemen yang harus diwarnai MERAH pada hover dan menjadi BIRU pada klik saat sedang melayang. Untuk mencapai ini dengan css, Anda perlu misalnya:

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

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

Saya berjuang selama beberapa waktu sampai saya menemukan bahwa urutan penyeleksi CSS adalah masalah yang saya alami. Masalahnya adalah saya mengganti tempat dan pemilih aktif tidak berfungsi. Kemudian saya menemukan bahwa :hoveruntuk pergi dulu dan kemudian :active.

Anda dapat menggunakan: target

untuk target umum

:target

atau filter berdasarkan nama kelas

.classname: target

atau filter berdasarkan nama id

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