Odpowiedź od 2020 roku:

Najlepszym sposobem (właściwie jedynym sposobem*) symulowania rzeczywistego zdarzenia click przy użyciu tylko CSS (a nie tylko kursora na elemencie lub aktywowania elementu, gdzie nie ma mouseUp ) jest użycie checkboxa. Działa poprzez dołączenie label na <input type="checkbox"> element poprzez atrybut for="" etykiety.

Ta funkcja ma szerokie wsparcie dla przeglądarki (pseudo-Klasa :checked jest IE9+).

Zastosuj tę samą wartość do atrybutu ID <input> i dołączonego atrybutu <label> for="", a możesz powiedzieć przeglądarce, aby zmieniła styl etykiety po kliknięciu za pomocą :checked pseudo-Klasa, dzięki temu, że kliknięcie etykiety spowoduje zaznaczenie i odznaczenie "associated" <input type="checkbox">.

* możesz symulować" wybrane " zdarzenie za pomocą pseudoklasy :active lub :focus w IE7+ (np. dla przycisku, który normalnie jest szeroki 50px, możesz zmienić jego szerokość podczas active: #btnControl:active { width: 75px; }), ale to nie są prawdziwe zdarzenia "kliknięcia". Są one" aktywne " przez cały czas wybierania elementu (np. przez Tabbing za pomocą klawiatury), co nieco różni się od zdarzenia prawdziwego kliknięcia, które uruchamia akcję - zazwyczaj - mouseUp.

Podstawowe demo checkbox hack (podstawowa struktura kodu dla tego, o co prosisz):

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>

Tutaj umieściłem Etykietę zaraz po wejściu w moim znaczniku. To jest tak, że mogę korzystać z sąsiadujący selektor rodzeństwa (the + klawisz), aby wybrać tylko etykietę, która natychmiast następuje za moim #demo pole wyboru. Ponieważ pseudoklasa :checked ma zastosowanie do pola wyboru, #demo:checked + label ma zastosowanie tylko wtedy, gdy pole jest zaznaczone.

Demo do zmiany rozmiaru obrazu po kliknięciu, o co prosisz:

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/140" id="btnLeft" /></label>

Demo do naśladowania efektu kliknięcia przycisku, powyżej i poza tym, o co pytasz:

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

Większość CSS w tym demo jest tylko do stylizacji elementu etykiety. Jeśli nie potrzebujesz przycisku , i żadnego starego elementu wystarczy, możesz usunąć prawie wszystkie style w tym demo, podobne do mojego drugiego demo powyżej.

Zauważysz też, że mam tam jedną nieruchomość z prefiksem, -moz-outline-radius. Jakiś czas temu Mozilla dodała tę niesamowitą właściwość non-spec do Firefoksa, ale ludzie z WebKit zdecydowali, że nie dodadzą jej {32]}, niestety. Więc Uznaj tę linię CSS za progresywne ulepszenie dla ludzi, którzy używają Firefoksa.

Możesz użyć pseudo klasy :target do naśladowania zdarzenia kliknięcia, podam ci przykład.

#something {
  display: none;
}

#something:target {
  display: block;
}

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

Oto Jak to wygląda: http://jsfiddle.net/TYhnb/

Należy zauważyć, że jest to ograniczone tylko do hiperłącza, więc jeśli musisz użyć innego niż hiperłącze, na przykład przycisku, możesz chcieć go trochę zhakować, na przykład stylizując hiperłącze, aby wyglądało jak przycisk.

Jeśli nadasz elementowi tabindex, możesz użyć pseudo klasy :focus do symulacji kliknięcia.

HTML

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

CSS

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

Http://jsfiddle.net/NaTj5/

Edit: odpowiedział przed OP Poniżej znajduje się onclick podobny do javascripts onclick, a nie pseudo klasa :active.

Można to osiągnąć tylko za pomocą Javascript lub checkbox Hack

Checkbox hack zasadniczo pozwala kliknąć etykietę, która "sprawdza" pole wyboru, co pozwala na styl etykiety, jak chcesz.

The demo

TylerH zrobił naprawdę dobrą odpowiedź, musiałem tylko dać ostatni przycisk wizualnej aktualizacji.

.btn {
    border-radius: 5px;
    padding: 10px 30px;
    box-shadow: 1px 1px 1px #000;
    background-image: linear-gradient(to bottom, #eee, #ddd);
}

.btn:hover {
    background-image: linear-gradient(to top, #adf, #8bf);
}

.btn:active {
    margin: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
}

#btnControl {
    display: block;
    visibility: hidden;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>

Co powiesz na czyste rozwiązanie CSS bez bycia (tym) hackym?

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

Po prostu użyjemy przejść css. Prawdopodobnie możesz zrobić podobnie z animacjami.

Sztuką jest zmienić opóźnienie przejścia tak, aby trwało gdy użytkownik kliknie.

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

Tutaj dodaję również klasę "clicked", aby javascript mógł również dostarczyć efekt, jeśli zajdzie taka potrzeba. Używam filtra 0px drop-shadow, ponieważ w ten sposób podświetli daną przezroczystą grafikę na niebiesko w moim przypadku.

Mam filtr na 0s tutaj tak, że nie będzie działać. Po zwolnieniu efektu Mogę dodać przejście z opóźnieniem, aby zapewnić ładny efekt "kliknięcia".

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

To pozwala mi skonfigurować go tak że gdy użytkownik kliknie przycisk, podświetla się na niebiesko, a następnie powoli zanika (można oczywiście użyć również innych efektów).

Chociaż jesteś ograniczony w tym sensie, że animacja do podświetlenia jest natychmiastowa, nadal zapewnia pożądany efekt. Prawdopodobnie możesz użyć tej sztuczki z animacją, aby uzyskać płynniejsze ogólne Przejście.

OK, to może stary post... ale był pierwszy wynik w google i postanowił zrobić własną mieszankę na tym jako..

NAJPIERW UŻYJĘ FOCUSA

Powodem tego jest to, że działa to ładnie dla przykładu, który pokazuję, jeśli ktoś chce zdarzenie typu mysz w dół to Użyj active

KOD HTML:

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

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

Więc dlaczego zamieszczam to w Stary wątek, cóż, ponieważ przykłady tutaj się różnią i pomyślałem, że przedstawię go społeczności, która jest działającym przykładem.

Jak już odpowiedział twórca wątku, chcą, aby efekt trwał tylko podczas zdarzenia kliknięcia. Teraz, choć nie jest to dokładne dla tej potrzeby, jego blisko. aktywna będzie animowana, gdy mysz jest wyłączona, a wszelkie zmiany, które musisz mieć dłużej, muszą być wykonane za pomocą javascript.

Uwaga! Szczególnie prosta odpowiedź poniżej! :)

Ty w rzeczywistości możesz mieć zmiany, które utrzymują się (takie jak blok/wyskakujące okienko, które pojawia się i pozostaje widoczne po kliknięciu) Z tylko CSS (i bez użycia checkbox hack) pomimo tego, co wiele z (w przeciwnym razie poprawnych) odpowiedzi tutaj twierdzą, tak długo, jak trzeba tylko wytrwałość podczas najazdu.

Miałem podobną sytuację, potrzebowałem Popup div z onClick, gdzie nie mogłem dodać żadnego JS lub zmienić znaczników / HTML (prawdziwie CSS rozwiązanie) i jest to możliwe z pewnymi zastrzeżeniami. Nie możesz użyć sztuczki :target, która może stworzyć ładne wyskakujące okienko, chyba że możesz zmienić kod HTML (aby dodać 'id'), aby go nie było.

W moim przypadku popup div został zawarty wewnątrz innego div I chciałem, aby popup pojawił się na drugim div, I można to zrobić za pomocą kombinacji :active I: 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;
}

Przykład (a także taki, który pozwala kliknąć na wyskakujące okienko, aby zniknęło) pod adresem:

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

Wstawiłem również poniższy przykład fragmentu kodu, ale pozycjonowanie w piaskownicy stackoverflow jest dziwne, więc musiałem umieścić tekst "Kliknij tutaj" po innerDiv, który zwykle nie jest potrzebny.

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

Mam poniższy kod do najechania myszką i kliknięcia myszką i działa:

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

A ten kod ukrywa obrazek po kliknięciu na niego:

.thumbnail:active span {
    visibility: hidden;
}

Miałem problem z elementem, który musiał być zabarwiony na czerwono po najechaniu na kursor i być niebieski po kliknięciu podczas najechania na kursor. Aby to osiągnąć z css potrzebujesz na przykład:

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

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

Zmagałem się przez jakiś czas, dopóki nie odkryłem, że kolejność selektorów CSS była problemem, który miałem. Problem polegał na tym, że zamieniłem miejsca i aktywny selektor nie działał. Potem dowiedziałem się, że :hover najpierw iść, a potem :active.

Możesz użyć :target

Lub aby filtrować według nazwy klasy, użyj .classname:target

Lub filtruj według nazwy id używając #idname:target

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

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