ฉันมีองค์ประกอบรูปภาพที่ต้องการเปลี่ยนแปลงเมื่อคลิก

<img id="btnLeft">

งานนี้:

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

แต่สิ่งที่ฉันต้องการคือ:

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

แต่มันไม่ทำงานแน่นอน เป็นไปได้หรือไม่ที่จะมีonclickพฤติกรรมใน CSS (เช่นโดยไม่ใช้ JavaScript)?

สิ่งที่ใกล้เคียงที่สุดที่คุณจะได้รับคือ:active:

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

อย่างไรก็ตามสิ่งนี้จะใช้สไตล์เมื่อกดปุ่มเมาส์ค้างไว้ วิธีเดียวที่จะใช้สไตล์และใช้กับ onclick คือการใช้ JavaScript เล็กน้อย

ตอบ ณ ปี 2562:

วิธีที่ดีที่สุด (จริง ๆ แล้วเป็นวิธีเดียว *) ในการจำลองเหตุการณ์การคลิกจริงโดยใช้ CSS เท่านั้น (แทนที่จะวางไว้บนองค์ประกอบหรือทำให้องค์ประกอบใช้งานอยู่ซึ่งคุณไม่มีmouseUp ) คือการใช้ช่องทำเครื่องหมายแฮ็ค มันทำงานได้โดยการแนบองค์ประกอบlabelไปยัง<input type="checkbox">องค์ประกอบผ่านfor=""คุณสมบัติของฉลาก

ฟีเจอร์นี้รองรับเบราว์เซอร์ในวงกว้าง ( :checkedหลอกระดับคือ IE9 +)

สมัครค่าเดียวกันไปยัง<input>'s แอตทริบิวต์รหัสและมาพร้อมกับ<label>' s for=""แอตทริบิวต์และคุณสามารถบอกเบราว์เซอร์ใหม่สไตล์ฉลากบนคลิกที่:checkedหลอกชั้นขอบคุณความจริงที่ว่าคลิกที่ป้ายจะตรวจสอบและยกเลิก <input type="checkbox">"ที่เกี่ยวข้อง"

* คุณสามารถจำลอง "เลือก" เหตุการณ์ผ่าน:activeหรือ:focusหลอกชั้นใน 7 + (เช่นปุ่มที่ปกติ50pxกว้างคุณสามารถเปลี่ยนความกว้างในขณะที่active: #btnControl:active { width: 75px; }) แต่ผู้ที่ไม่เป็นความจริง "คลิก" เหตุการณ์ที่เกิดขึ้น พวกเขาจะ "อยู่" ตลอดเวลาที่องค์ประกอบที่จะถูกเลือก (เช่นโดยTabBing กับแป้นพิมพ์ของคุณ) ซึ่งเป็นที่แตกต่างกันเล็ก ๆ น้อย ๆ จากเหตุการณ์คลิกจริงซึ่ง fires ดำเนินการบน - โดยทั่วไป mouseUp-

การสาธิตพื้นฐานของช่องทำเครื่องหมายแฮ็ค (โครงสร้างรหัสพื้นฐานสำหรับสิ่งที่คุณถาม):

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>

ที่นี่ฉันได้จัดวางป้ายกำกับทันทีหลังจากที่ป้อนข้อมูลในมาร์กอัปของฉัน นี่คือเพื่อให้ฉันสามารถใช้ตัวเลือกพี่น้อง ( +ปุ่ม) ที่อยู่ติดกันเพื่อเลือกเฉพาะฉลากที่ตามหลัง#demoช่องทำเครื่องหมายของฉันทันที เนื่องจาก:checkedคลาสหลอกใช้กับช่องทำเครื่องหมาย#demo:checked + labelจะใช้เฉพาะเมื่อมีการทำเครื่องหมายที่ช่องทำเครื่องหมาย

การสาธิตการปรับขนาดรูปภาพเมื่อคลิกซึ่งเป็นสิ่งที่คุณต้องการ:

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

กับที่ถูกกล่าวว่ามีเป็นบางข่าวร้าย เนื่องจากป้ายกำกับสามารถเชื่อมโยงกับการควบคุมฟอร์มได้ครั้งละหนึ่งรายการเท่านั้นนั่นหมายความว่าคุณไม่สามารถวางปุ่มใน<label></label>แท็กและเรียกมันต่อวันได้ อย่างไรก็ตามเราสามารถใช้ CSS บางอย่างเพื่อทำให้ป้ายกำกับดูและทำงานใกล้เคียงกับลักษณะของปุ่ม HTML ที่มีลักษณะและการทำงาน

การสาธิตเพื่อเลียนแบบเอฟเฟกต์คลิกปุ่มด้านบนและเหนือสิ่งที่คุณขอ:

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

CSS ส่วนใหญ่ในการสาธิตนี้ใช้เพื่อจัดแต่งองค์ประกอบป้ายกำกับเท่านั้น หากคุณไม่ต้องการปุ่มจริงๆและองค์ประกอบเก่า ๆ จะพอเพียงคุณสามารถลบสไตล์ทั้งหมดในการสาธิตนี้ได้คล้ายกับการสาธิตที่สองของฉันด้านบน

คุณจะสังเกตเห็นว่าฉันมีหนึ่งคำนำหน้าคุณสมบัติอยู่ในนั้น, -moz-outline-radius. เมื่อครู่กลับ Mozilla ได้เพิ่มคุณสมบัติที่ไม่ใช่สเป็กอันน่าทึ่งนี้ให้กับ Firefox แต่ผู้คนที่ WebKit ตัดสินใจว่าพวกเขาจะไม่เพิ่มมันเข้าไป ดังนั้นให้พิจารณาบรรทัด CSS นั้นเป็นเพียงการปรับปรุงที่ก้าวหน้าสำหรับผู้ที่ใช้ Firefox

คุณสามารถใช้คลาสหลอก:targetเพื่อเลียนแบบเหตุการณ์คลิกให้ฉันยกตัวอย่างให้คุณ

#something {
  display: none;
}

#something:target {
  display: block;
}

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

นี่คือลักษณะ: http://jsfiddle.net/TYhnb/

สิ่งหนึ่งที่ควรทราบนี่เป็นเพียงการ จำกัด การเชื่อมโยงหลายมิติเท่านั้นดังนั้นหากคุณจำเป็นต้องใช้การเชื่อมโยงอื่น ๆ นอกเหนือจากการเชื่อมโยงหลายมิติเช่นปุ่มคุณอาจต้องการแฮ็คมันเล็กน้อยเช่นใส่สไตล์ให้เป็นการเชื่อมโยงหลายมิติ

หากคุณให้องค์ประกอบแก่tabindexคุณคุณสามารถใช้:focusคลาสหลอกเพื่อจำลองการคลิก

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/

แก้ไข: ตอบก่อน OP อธิบายสิ่งที่เขาต้องการ ต่อไปนี้สำหรับ onclick คล้ายกับ javascripts onclick ไม่ใช่:activeคลาส pseudo

สามารถทำได้ด้วย Javascript หรือCheckbox Hack เท่านั้น

แฮ็คช่องทำเครื่องหมายให้คุณคลิกที่ป้ายกำกับว่า "ตรวจสอบ" ช่องทำเครื่องหมายช่วยให้คุณสามารถจัดรูปแบบป้ายกำกับตามที่คุณต้องการ

สาธิต

TylerHได้คำตอบที่ดีมากและฉันแค่ต้องให้การอัปเดตปุ่มรุ่นสุดท้าย

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

วิธีการแก้ปัญหา CSS บริสุทธิ์โดยไม่ต้องแฮ็ค (ที่)?

.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 มีการตอบสนองที่ดี แต่มันเป็นทางออกที่ซับซ้อน ฉันมีวิธีแก้ปัญหาสำหรับผู้ที่ต้องการเพียงแค่เอฟเฟกต์ "onclick" แบบง่ายๆด้วย CSS บริสุทธิ์โดยไม่ต้องมีองค์ประกอบพิเศษมากมาย

เราเพียงแค่จะใช้การเปลี่ยน CSS คุณอาจทำคล้ายกับภาพเคลื่อนไหวได้

เคล็ดลับคือการเปลี่ยนการหน่วงเวลาสำหรับการเปลี่ยนแปลงเพื่อให้คงอยู่เมื่อผู้ใช้คลิก

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

ที่นี่ฉันเพิ่มคลาส "คลิก" เช่นกันเพื่อให้จาวาสคริปต์สามารถให้ผลถ้ามันต้องการ ฉันใช้ตัวกรองเงา 0px เพราะมันจะเน้นสีฟ้าใสกราฟิกที่กำหนดวิธีนี้สำหรับกรณีของฉัน

ฉันมีตัวกรองที่ 0s ที่นี่เพื่อไม่ให้มีผล เมื่อปล่อยเอฟเฟกต์แล้วฉันสามารถเพิ่มการเปลี่ยนแปลงด้วยความล่าช้าเพื่อให้เอฟเฟกต์ "คลิก" ที่ดี

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

สิ่งนี้ทำให้ฉันสามารถตั้งค่าเพื่อให้เมื่อผู้ใช้คลิกปุ่มมันจะเน้นสีฟ้าและจางหายไปอย่างช้าๆ (แน่นอนคุณสามารถใช้เอฟเฟกต์อื่น ๆ ได้เช่นกัน)

ในขณะที่คุณถูก จำกัด ที่นี่ในแง่ที่ว่าภาพเคลื่อนไหวเพื่อไฮไลท์เป็นแบบทันที คุณอาจใช้เคล็ดลับนี้กับภาพเคลื่อนไหวเพื่อสร้างการเปลี่ยนแปลงโดยรวมที่ราบรื่นขึ้น

โอเคนี่อาจจะเป็นโพสต์เก่า ... แต่เป็นผลครั้งแรกใน google และตัดสินใจที่จะทำมิกซ์ของคุณเองในเรื่องนี้ ..

ฉันจะใช้ FOCUS เป็นครั้งแรก

เหตุผลนี้คือมันทำงานได้ดีสำหรับตัวอย่างที่ฉันแสดงถ้ามีคนต้องการใช้เมาส์พิมพ์เหตุการณ์แล้วใช้งาน

รหัส HTML:

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

รหัส 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: http://jsfiddle.net/00wwkjux/

เหตุใดฉันจึงโพสต์สิ่งนี้ในเธรดเก่าดีเพราะตัวอย่างที่นี่แตกต่างกันไปและฉันคิดว่าจะให้หนึ่งกลับไปที่ชุมชนซึ่งเป็นตัวอย่างการทำงาน

ตามที่ผู้สร้างเธรดตอบไว้แล้วพวกเขาต้องการให้เอฟเฟ็กต์มีอายุการใช้งานในช่วงเหตุการณ์คลิกเท่านั้น ตอนนี้ขณะนี้ไม่แน่นอนสำหรับความต้องการที่ใกล้ แอคทีฟจะทำให้เคลื่อนไหวในขณะที่เมาส์หยุดทำงานและการเปลี่ยนแปลงใด ๆ ที่คุณต้องใช้อีกต่อไปจะต้องดำเนินการอีกครั้งด้วย Javascript

คำเตือน! คำตอบง่ายๆโดยเฉพาะด้านล่าง! :)

คุณสามารถทำการเปลี่ยนแปลงที่มีอยู่ (เช่นบล็อก / ป๊อปอัพที่ปรากฏและยังคงมองเห็นได้หลังจากการคลิก) ด้วยCSS เท่านั้น (และไม่ใช้แฮ็กช่องทำเครื่องหมาย) แม้จะมีคำตอบมากมาย (ถูกต้อง) ที่นี่ ตามที่คุณต้องการเพียงการคงอยู่ในระหว่างโฮเวอร์

ลองดูที่คำตอบของ Bojangles และ TylerH ถ้ามันเหมาะกับคุณ แต่ถ้าคุณต้องการคำตอบที่ง่ายและ CSS เพียงอย่างเดียวที่จะทำให้บล็อกมองเห็นได้หลังจากถูกคลิก (และอาจทำให้บล็อกหายไปเมื่อคลิกติดตาม) ดูวิธีแก้ปัญหานี้

ฉันมีสถานการณ์ที่คล้ายกันฉันต้องการป๊อปอัป div ด้วย onClick ที่ฉันไม่สามารถเพิ่ม JS หรือเปลี่ยนมาร์กอัพ / HTML (โซลูชัน CSS อย่างแท้จริง) และสิ่งนี้เป็นไปได้กับข้อแม้บางประการ คุณไม่สามารถใช้: เคล็ดลับเป้าหมายที่สามารถสร้างป๊อปอัปที่ดีเว้นแต่ว่าคุณจะสามารถเปลี่ยน HTML (เพื่อเพิ่ม 'id') เพื่อที่จะออก

ในกรณีของฉันมีป๊อปอัป div อยู่ใน div อื่นและฉันต้องการให้ป๊อปอัปปรากฏบน div อื่น ๆ และสามารถทำได้โดยใช้การรวมกันของ: active และ: 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;
}

ตัวอย่าง (เช่นเดียวกับที่อนุญาตให้คลิกที่ป๊อปอัปเพื่อทำให้หายไป) ที่:

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

ฉันได้แทรกตัวอย่างข้อมูลโค้ดด้านล่างด้วย แต่การวางตำแหน่งในแซนด์บ็อกซ์สแต็คโอเวอร์โฟลด์นั้นแปลกดังนั้นฉันต้องใส่ข้อความ 'คลิกที่นี่' หลัง InnerDiv ซึ่งไม่จำเป็นต้องใช้ตามปกติ

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

ฉันมีรหัสด้านล่างสำหรับการเลื่อนเมาส์และคลิกเมาส์และทำงาน:

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

และรหัสนี้จะซ่อนภาพเมื่อคุณคลิก:

.thumbnail:active span {
    visibility: hidden;
}

ฉันมีปัญหากับองค์ประกอบที่ต้องเป็นสีแดงเมื่อเลื่อนและเป็นสีน้ำเงินเมื่อคลิกในขณะที่ถูกโฮเวอร์ เพื่อให้บรรลุสิ่งนี้ด้วย css คุณต้องมีตัวอย่างเช่น:

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

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

ฉันพยายามบางครั้งจนกระทั่งพบว่าลำดับของตัวเลือก CSS คือปัญหาที่ฉันมี ปัญหาคือว่าฉันเปลี่ยนสถานที่และตัวเลือกที่ใช้งานไม่ทำงาน จากนั้นฉันก็พบว่าสิ่งที่:hoverต้องทำก่อนแล้วจึง:activeไป

คุณสามารถใช้: เป้าหมาย

สำหรับเป้าหมายทั่วไป

: เป้าหมาย

หรือกรองตามชื่อคลาส

.classname: เป้าหมาย

หรือกรองตามชื่อรหัส

#idname: เป้าหมาย

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