Tôi có một yếu tố hình ảnh mà tôi muốn thay đổi khi nhấp chuột.

<img id="btnLeft">

Những công việc này:

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

Nhưng cái tôi cần là:

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

Nhưng, nó không hoạt động, rõ ràng. Có thể có tất cả các onclickhành vi trong CSS (tức là không sử dụng JavaScript) không?

Cách gần nhất bạn sẽ nhận được là :active:

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

Tuy nhiên, điều này sẽ chỉ áp dụng kiểu khi nhấn nút chuột. Cách duy nhất để áp dụng một kiểu và giữ cho nó được áp dụng onclick là sử dụng một chút JavaScript.

Trả lời vào năm 2019:

Cách tốt nhất (thực ra là cách duy nhất *) để mô phỏng sự kiện nhấp thực tế chỉ bằng CSS (thay vì chỉ di chuột trên một phần tử hoặc làm cho phần tử hoạt động, trong đó bạn không có mouseUp ) là sử dụng hack hộp kiểm. Nó hoạt động bằng cách gắn một labelđến một <input type="checkbox">yếu tố qua của nhãn for=""thuộc tính.

Tính năng này có hỗ trợ trình duyệt rộng (lớp :checkedgiả là IE9 +).

Áp dụng cùng một giá trị cho một <input>'s ID thuộc tính và kèm theo <label>' s for=""thuộc tính, và bạn có thể nói với các trình duyệt để tái kiểu nhãn trên nhấp chuột với :checkedpseudo-class, nhờ thực tế là nhấp chuột vào một nhãn sẽ kiểm tra và bỏ chọn "Liên kết" <input type="checkbox">.

* Bạn có thể mô phỏng một "lựa chọn" sự kiện thông qua :activehoặc :focuspseudo-class trong IE7 + (ví dụ cho một nút đó là bình thường 50pxrộng, bạn có thể thay đổi chiều rộng của nó trong khi active: #btnControl:active { width: 75px; }), nhưng đó là không đúng sự thật "click" sự kiện. Chúng "sống" trong toàn bộ thời gian phần tử được chọn (chẳng hạn như bằng cách Tabsử dụng bàn phím của bạn), khác một chút so với sự kiện nhấp chuột thực sự, kích hoạt một hành động trên - thông thường - mouseUp.

Bản demo cơ bản của hộp kiểm hack (cấu trúc mã cơ bản cho những gì bạn đang hỏi):

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>

Ở đây tôi đã định vị nhãn ngay sau khi nhập vào đánh dấu của tôi. Điều này là để tôi có thể sử dụng bộ chọn anh chị em liền kề ( +phím) để chỉ chọn nhãn ngay sau #demohộp kiểm của mình . Vì lớp :checkedgiả áp dụng cho hộp kiểm, #demo:checked + labelsẽ chỉ áp dụng khi hộp kiểm được chọn.

Bản demo để định cỡ lại hình ảnh khi nhấp, đó là những gì bạn đang hỏi:

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

Với con người mà nói, có là một số tin xấu. Bởi vì một nhãn chỉ có thể được liên kết với một điều khiển biểu mẫu tại một thời điểm , điều đó có nghĩa là bạn không thể thả một nút bên trong các <label></label>thẻ và gọi nó là một ngày. Tuy nhiên, chúng ta có thể sử dụng một số CSS để làm cho nhãn trông và hoạt động khá gần với cách một nút HTML trông và hành xử.

Bản trình diễn để bắt chước hiệu ứng nhấp vào nút, bên trên và ngoài những gì bạn đang hỏi:

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

Hầu hết các CSS trong bản demo này chỉ để tạo kiểu cho phần tử nhãn. Nếu bạn không thực sự cần một nút và bất kỳ yếu tố cũ nào cũng đủ, thì bạn có thể xóa gần như tất cả các kiểu trong bản demo này, tương tự như bản demo thứ hai của tôi ở trên.

Bạn cũng sẽ nhận thấy tôi có một tài sản tiền tố ở đó , -moz-outline-radius. Một thời gian trước, Mozilla đã thêm tài sản phi thông số tuyệt vời này vào Firefox, nhưng những người ở WebKit đã quyết định rằng họ sẽ không thêm nó , thật không may. Vì vậy, hãy xem dòng CSS đó chỉ là một cải tiến tiến bộ cho những người sử dụng Firefox.

Bạn có thể sử dụng lớp giả :targetđể bắt chước sự kiện nhấp chuột, để tôi cho bạn một ví dụ.

#something {
  display: none;
}

#something:target {
  display: block;
}

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

Đây là cách nó trông như thế nào: http://jsfiddle.net/TYhnb/

Một điều cần lưu ý, điều này chỉ giới hạn ở siêu liên kết, vì vậy nếu bạn cần sử dụng trên siêu liên kết, chẳng hạn như nút, bạn có thể muốn hack một chút, chẳng hạn như tạo một siêu liên kết để trông giống như một nút.

Nếu bạn cho phần tử a tabindexthì bạn có thể sử dụng :focuslớp giả để mô phỏng một nhấp chuột.

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/

Chỉnh sửa: Đã trả lời trước khi OP làm rõ những gì anh ta muốn. Dưới đây là một onclick tương tự như javascripts onclick, không phải là:active lớp giả.

Điều này chỉ có thể đạt được với Javascript hoặc Checkbox Hack

Việc hack hộp kiểm về cơ bản giúp bạn nhấp vào nhãn, "kiểm tra" hộp kiểm, cho phép bạn tạo kiểu nhãn theo ý muốn.

Bản demo

TylerH đã thực hiện một câu trả lời thực sự tốt, và tôi chỉ cần cập nhật phiên bản nút cuối cùng đó.

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

Làm thế nào về một giải pháp CSS thuần mà không bị hack (đó)?

.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 có một phản hồi tuyệt vời nhưng đó là một giải pháp khá phức tạp. Tôi có một giải pháp cho những bạn chỉ muốn một hiệu ứng "onclick" đơn giản với css thuần túy mà không cần một loạt các yếu tố phụ.

Chúng tôi chỉ đơn giản sẽ sử dụng chuyển tiếp css. Bạn có thể có thể làm tương tự với hình ảnh động.

Mẹo nhỏ là thay đổi độ trễ cho quá trình chuyển đổi để nó sẽ kéo dài khi người dùng nhấp vào.

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

Ở đây tôi cũng thêm lớp "nhấp chuột" để javascript cũng có thể cung cấp hiệu ứng nếu cần. Tôi sử dụng bộ lọc bóng đổ 0px vì nó sẽ làm nổi bật màu xanh đồ họa trong suốt theo cách này cho trường hợp của tôi.

Tôi có một bộ lọc ở 0s ở đây để nó không có hiệu lực. Khi hiệu ứng được giải phóng, sau đó tôi có thể thêm quá trình chuyển đổi với độ trễ để nó sẽ cung cấp hiệu ứng "nhấp chuột" đẹp mắt.

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

Điều này cho phép tôi thiết lập nó để khi người dùng nhấp vào nút, nó sẽ nổi bật màu xanh lam sau đó mờ dần (tất nhiên, bạn cũng có thể sử dụng các hiệu ứng khác).

Mặc dù bạn bị giới hạn ở đây theo nghĩa là hình ảnh động cần làm nổi bật là tức thì, nhưng nó vẫn mang lại hiệu quả mong muốn. Bạn có thể sử dụng thủ thuật này với hoạt hình để tạo ra sự chuyển tiếp tổng thể mượt mà hơn.

Được rồi, đây có thể là một bài viết cũ ... nhưng là kết quả đầu tiên trong google và quyết định tạo ra hỗn hợp của riêng bạn trên này như ..

ĐẦU TIÊN TÔI S US SỬ DỤNG FOCUS

Lý do cho điều này là vì nó hoạt động độc đáo cho ví dụ tôi đang hiển thị, nếu ai đó muốn một sự kiện loại chuột xuống thì hãy sử dụng kích hoạt

MÃ HTML:

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

MÃ 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');   }

LIÊN KẾT FIDDLE: http://jsfiddle.net/00wwkjux/

Vậy tại sao tôi lại đăng bài này trong một chủ đề cũ, bởi vì các ví dụ ở đây khác nhau và tôi nghĩ sẽ cung cấp một cái cho cộng đồng, một ví dụ hoạt động.

Như đã được trả lời bởi người tạo chủ đề, họ chỉ muốn hiệu ứng kéo dài trong sự kiện nhấp chuột. Bây giờ trong khi điều này không chính xác cho nhu cầu đó, nó đã đóng. kích hoạt sẽ hoạt hình trong khi chuột không hoạt động và bất kỳ thay đổi nào bạn cần phải kéo dài hơn cần phải được thực hiện với javascript.

Cảnh báo! Đặc biệt câu trả lời đơn giản dưới đây! :)

Bạn thực sự có thể có một thay đổi vẫn tồn tại (chẳng hạn như một khối / cửa sổ bật lên xuất hiện và vẫn hiển thị sau một nhấp chuột) chỉ với CSS (và không sử dụng hộp kiểm tra hack) mặc dù có rất nhiều câu trả lời (nếu không chính xác) ở đây yêu cầu, miễn là như bạn chỉ cần kiên trì trong khi di chuột.

Vì vậy, hãy xem câu trả lời của Bojangles và TylerH nếu những câu đó phù hợp với bạn, nhưng nếu bạn muốn một câu trả lời đơn giản và CSS sẽ giữ một khối hiển thị sau khi được nhấp vào (và thậm chí có thể biến khối đó bằng một lần nhấp tiếp theo), sau đó xem giải pháp này

Tôi đã gặp một tình huống tương tự, tôi cần một div popup với onClick nơi tôi không thể thêm bất kỳ JS hoặc thay đổi đánh dấu / HTML (một giải pháp CSS thực sự) và điều này có thể xảy ra với một số cảnh báo. Bạn không thể sử dụng thủ thuật: nhắm mục tiêu có thể tạo ra một cửa sổ bật lên đẹp trừ khi bạn có thể thay đổi HTML (để thêm 'id').

Trong trường hợp của tôi, div cửa sổ bật lên được chứa bên trong div khác và tôi muốn cửa sổ bật lên xuất hiện trên đầu của div khác và điều này có thể được thực hiện bằng cách sử dụng kết hợp: active và: 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;
}

Ví dụ (cũng như một ví dụ cho phép nhấp vào cửa sổ bật lên để làm cho nó biến mất) tại:

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

Tôi cũng đã chèn một ví dụ đoạn mã bên dưới, nhưng vị trí trong hộp cát stackoverflow rất lạ nên tôi phải đặt văn bản 'nhấp vào đây' sau InternalDiv, thông thường không cần thiết.

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

Tôi có mã dưới đây để di chuột và nhấp chuột và nó hoạt động:

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

và mã này ẩn hình ảnh khi bạn nhấp vào nó:

.thumbnail:active span {
    visibility: hidden;
}

Tôi gặp vấn đề với một yếu tố phải được tô màu ĐỎ khi di chuột và có màu XANH khi nhấp khi đang di chuột. Để đạt được điều này với css, bạn cần ví dụ:

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

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

Tôi đã vật lộn một thời gian cho đến khi tôi phát hiện ra rằng thứ tự của các bộ chọn CSS là vấn đề tôi gặp phải. Vấn đề là tôi đã chuyển địa điểm và bộ chọn hoạt động không hoạt động. Sau đó tôi phát hiện ra rằng :hoverđể đi đầu tiên và sau đó :active.

bạn có thể sử dụng: mục tiêu

cho mục tiêu chung

:Mục tiêu

hoặc lọc theo tên lớp

. classname: mục tiêu

hoặc lọc theo tên id

#idname: mục tiêu

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