Tıklamada değiştirmek istediğim bir resim öğem var.

<img id="btnLeft">

Bu çalışıyor:

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

Ama ihtiyacım olan şey:

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

Ancak, açıkça işe yaramıyor. onclickCSS'de davranışa sahip olmak (yani JavaScript kullanmadan) mümkün müdür ?

En yakın alacağınız :active:

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

Ancak bu, stili yalnızca fare düğmesi basılı tutulduğunda uygulanır. Bir stili uygulamanın ve uygulamanızı tek tıklamanın tek yolu biraz JavaScript kullanmaktır.

2019 itibarıyla cevap:

Yalnızca bir CSS kullanarak gerçek bir tıklama etkinliğini simüle etmenin en iyi yolu (aslında tek yol *) (yalnızca bir öğenin üzerine gelmek veya bir öğeyi aktif hale getirmek değil, mouseUp'ın olmadığı yerlerde ) onay kutusu kesmek kullanmaktır. Etiketin özelliği aracılığıyla labelbir <input type="checkbox">öğeye a ekleyerek çalışır for="".

Bu özellik geniş tarayıcı desteğine sahiptir ( :checkedsözde sınıf IE9 + 'dır).

Bir aynı değeri uygula <input>'ın kimlik özelliği ve beraberindeki <label>' ın for=""özniteliği ve birlikte tıklamasında etiket yeniden stiline tarayıcı söyleyebilir :checkedsözde sınıfı, aslında sayesinde bir etiket tıklayarak kontrol edeceğini ve işaretini kaldırın "ilişkili" <input type="checkbox">.

* Sen yoluyla bir "seçilmiş" olayı simüle edebilirsiniz :activeveya :focus(normalde var bir düğme için örneğin IE7 + içinde sözde sınıfı 50px, sen ise onun genişliğini değiştirebilirsiniz geniş active: #btnControl:active { width: 75px; }), ancak bu doğru değildir olayları "tıklama". Öğenin seçildiği süre boyunca (örneğin Tab, klavyenizle bing yaparak) "canlı" olurlar; bu, gerçek bir tıklama etkinliğinden biraz farklıdır ve bu da - genellikle - bir eylem başlatır mouseUp.

Onay kutusu kesmek için temel demo (sorduğunuz şey için temel kod yapısı):

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>

Burada, işaretlememdeki girişten hemen sonra etiketi konumlandırdım. Bu, yalnızca onay kutumu hemen takip eden etiketi seçmek için bitişik kardeş seçiciyi ( +anahtar) kullanabilmem için geçerlidir #demo. Yana :checkedsözde sınıfı onay kutusunun için geçerlidir, #demo:checked + labelonay kutusu işaretlendiğinde geçerli olur.

Tıklamadaki bir görüntüyü yeniden boyutlandırma demosu, sorduğunuz şey budur:

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

Bununla birlikte , bazı kötü haberler var. Bir etiket aynı anda yalnızca bir form denetimiyle ilişkilendirilebildiğinden , <label></label>etiketlerin içine bir düğmeyi bırakıp bir gün diyemeyeceğiniz anlamına gelir . Ancak, biz olabilir etiket görünmesi ve nasıl bir HTML düğme görünümünü ve çalışma oldukça yakın davranmaya bazı CSS kullanabilirsiniz.

İstediğiniz şeyin üstünde ve ötesinde bir düğme tıklama efektini taklit etmek için demo:

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

Bu demoda yer alan CSS'nin çoğu yalnızca etiket öğesini biçimlendirmek içindir. Aslında bir düğmeye ihtiyacınız yoksa ve herhangi bir eski öğe yeterli olursa, bu demodaki yukarıdaki tüm demolara benzer neredeyse tüm stilleri kaldırabilirsiniz.

Ayrıca orada önceden eklenmiş bir mülküm olduğunu fark edeceksiniz -moz-outline-radius. Bir süre önce, Mozilla bu muhteşem spesifik olmayan özelliği Firefox'a ekledi, ancak WebKit'teki insanlar maalesef eklemeyeceklerine karar verdiler . Bu yüzden bu CSS hattının Firefox kullanan insanlar için sadece aşamalı bir gelişme olduğunu düşünün.

:targetTıklama etkinliğini taklit etmek için sözde sınıfı kullanabilirsiniz , size bir örnek vereyim.

#something {
  display: none;
}

#something:target {
  display: block;
}

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

Şöyle görünüyor: http://jsfiddle.net/TYhnb/

Unutulmaması gereken bir şey, bu sadece köprü ile sınırlıdır, bu nedenle bir düğme gibi köprüden başka bir şey kullanmanız gerekiyorsa, bir düğme gibi görünmek için bir köprü biçimlendirme gibi biraz kesmek isteyebilirsiniz.

Öğeye bir verirseniz, bir tıklamayı simüle etmek tabindexiçin :focussözde sınıfı kullanabilirsiniz.

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/

Düzenleme: OP ne istediğini açıklamadan önce cevapladı. Aşağıdaki, :activesözde sınıf değil, javascripts'e benzer bir onclick içindir .

Bu yalnızca Javascript veya Checkbox Hack ile yapılabilir

Onay kutusu kesmek esasen bir etiketi tıklatmanızı sağlar, bu da bir onay kutusunu "kontrol eder" ve etiketi istediğiniz gibi şekillendirmenizi sağlar.

gösteri

TylerH gerçekten iyi bir cevap verdi ve ben sadece son düğme versiyonuna bir güncelleme vermek zorunda kaldım.

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

Keskin olmayan bir CSS çözümüne ne dersiniz?

.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 harika bir yanıtı var ama oldukça karmaşık bir çözüm. Ben sadece bir sürü ekstra eleman olmadan saf css ile basit bir "onclick" etkisi isteyen sizin için bir çözüm var.

Sadece css geçişlerini kullanacağız. Muhtemelen animasyonlara benzer şeyler yapabilirsiniz.

Hile, geçişin gecikmesini, kullanıcı tıkladığında sürecek şekilde değiştirmektir.

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

Burada "tıkladı" sınıfı da eklemek böylece javascript de gerekirse etkisi sağlayabilir. Benim durumum için verilen şeffaf grafik mavisini bu şekilde vurgulayacağından 0px gölge filtresi kullanıyorum.

Burada 0s bir filtre var böylece etkili olmayacak. Efekt bırakıldığında, geçişi gecikmeli olarak ekleyebilirim, böylece hoş bir "tıklanmış" efekt sağlar.

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

Bu, kullanıcı düğmeyi tıkladığında maviyi vurgulayıp yavaşça sönecek şekilde ayarlamama izin veriyor (elbette başka efektler de kullanabilirsiniz).

Burada vurgulanacak animasyonun anlık olmasıyla sınırlı olsanız da, yine de istenen efekti sağlar. Daha akıcı bir geçiş sağlamak için bu hileyi animasyonla kullanabilirsiniz.

Tamam, bu belki eski bir yazı ... ama ilk google sonuç oldu ve bu konuda kendi karışımı yapmaya karar verdi ..

İLK ODAK KULLANACAK

Bunun nedeni, bir fare aşağı tip olayı istiyorsa aktif olarak kullanmak istediğim örnek için güzel çalışıyor olmasıdır

HTML KODU:

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

CSS KODU:

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

Peki neden bu eski bir iş parçacığında gönderiyorum, iyi çünkü burada örnekler değişir ve çalışan bir örnek olan topluluğa bir geri vermeyi düşündüm.

İş parçacığı oluşturucu tarafından zaten yanıtlandığı gibi, efektin yalnızca tıklama etkinliği sırasında sürmesini istiyorlar. Şimdi bu ihtiyaç için tam olmasa da, yakın. fare kapalıyken etkin olarak hareket eder ve en son yapmanız gereken değişikliklerin javascript ile yapılması gerekir.

Uyarı! Aşağıdaki özellikle basit bir cevap! :)

Sen gerçekten yapabilen bir değişiklik olması devam ederse (örneğin bir blok / pop-up ile bu görünür ve bir tıklama sonra görünür kalır) ile sadece CSS (ve onay kutusu kesmek kullanmadan) sürece, (aksi doğru) birçok burada iddia cevaplar rağmen ne sadece fareyle üzerine gelindiğinde ısrarcılığa ihtiyacın var.

Bu yüzden sizin için çalışıyorsa Bojangles ve TylerH'ın cevaplarına bir göz atın, ancak sadece tıklandıktan sonra bir bloğu görünür tutacak basit bir ve CSS cevabı istiyorsanız (ve hatta blok bir tıklama tıklamasıyla kaybolabilir), bu çözüme bakın.

Ben benzer bir durum vardı, ben herhangi bir JS ekleyemiyor veya biçimlendirme / HTML (gerçekten bir CSS çözümü) değiştiremedim onClick ile bir pop-up div gerekiyordu ve bu bazı uyarılar ile mümkündür. HTML'yi değiştiremezseniz ('id' eklemek için) güzel bir pop-up oluşturabilen: hedef hile'ni kullanamazsınız.

Benim durumumda div div diğer div içinde yer aldı ve pop-up diğer div üstünde görünmesini istedim ve bu bir kombinasyonu kullanılarak yapılabilir: aktif ve: 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;
}

Örnek (yanı sıra, açılır pencerenin kaybolmasını sağlamak için tıklamaya izin veren):

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

Ben de aşağıda bir kod snippet örneği ekledim, ancak stackoverflow sanal alanındaki konumlandırma gariptir, bu yüzden normalde gerekli olmayan innerDiv'den sonra 'buraya tıklayın' metnini koymak zorunda kaldım.

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

Fare vurgulu ve fare tıklaması için aşağıdaki kod var ve çalışıyor:

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

ve bu kod resmi tıkladığınızda gizler:

.thumbnail:active span {
    visibility: hidden;
}

Fareyle üzerine gelindiğinde KIRMIZI renklendirilmesi ve fareyle üzerine gelindiğinde tıkla üzerine MAVİ olması gereken bir elemanla ilgili bir sorunum vardı. Bunu css ile başarmak için örneğin:

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

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

CSS seçicilerinin sırasının yaşadığım problem olduğunu keşfedinceye kadar bir süre mücadele ettim. Sorun, yerleri değiştirmem ve aktif seçicinin çalışmamasıydı. Sonra :hoverönce ve sonra gitmek için öğrendim :active.

şunları kullanabilirsiniz: hedef

genel hedef için

:hedef

veya sınıf adına göre filtrele

.classname: Hedef

veya kimlik adına göre filtrele

#idname: Hedef

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