У мене є елемент зображення, який я хочу змінити при натисканні.

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

Відповідь станом на 2019 рік:

Найкращий спосіб (насправді єдиний спосіб *) для імітації фактичної події натискання, використовуючи лише CSS (а не просто навішування елемента або активування елементу, де у вас немає mouseUp ) - використовувати хак-хак. Він працює заклеювання labelдо <input type="checkbox">елементу з допомогою лейбла for=""атрибута.

Ця функція має широку підтримку браузера ( :checkedпсевдоклас - IE9 +).

Застосувати таке ж значення , до <input>«s атрибут ID і супроводжуючим <label>» s for=""атрибута, і ви можете сказати браузеру , щоб повторно стилі етикетки одним помахом з :checkedпсевдо-класу, завдяки тому , що при натисканні на мітку буде перевіряти і зніміть "пов'язаний"<input type="checkbox"> .

* Ви можете імітувати «обраний» подія через :activeабо :focusпсевдо-класу в IE7 + (наприклад , для кнопки , яке зазвичай 50pxшироко, ви можете змінити його ширину той час як active: #btnControl:active { width: 75px; }), але це не так "натисніть кнопку" події. Вони "живуть" протягом усього часу вибору елемента (наприклад, за допомогою Tabbing за допомогою клавіатури), що трохи відрізняється від події справжнього натискання, яка запускає дію на - як правило - 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/

Варто зазначити, що це обмежується лише гіперпосиланням, тому, якщо вам потрібно скористатися іншими, ніж гіперпосиланнями, такими як кнопка, ви можете трохи поламати її, наприклад стилізацію гіперпосилання, щоб вона виглядала як кнопка.

Якщо ви надаєте елементу a, tabindexви можете використовувати:focus клас псевдо для імітації клацання.

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/

Редагувати: Відповів, перш ніж ОП уточнив, чого він хоче. Далі йдеться про onclick, схожий на javascripts onclick, а не на:active псевдоклас.

Цього можна досягти лише за допомогою Javascript або Hack Check

Злом галочки по суті змушує вас натиснути на мітку, яка "перевіряє" прапорець, що дозволяє вам стилізувати мітку за своїм бажанням.

демо

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

Тут я додаю клас "клацання", щоб javascript також міг забезпечити ефект, якщо це потрібно. Я використовую 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 і вирішив зробити власну суміш з цього питання як ..

ПЕРШИЙ Я ВИКОРИСТУЮ ФОКУС

Причиною цього є те, що це добре працює, наприклад, я показую, якщо хтось хоче подія введення миші, тоді використовуйте активні

HTML-КОД:

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

КОД КСУ:

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

То чому я розміщую це в старому потоці, тому що приклади тут різняться, і я думав повернути спільноту, яка є робочим прикладом.

Як уже відповів автор нитки, вони хочуть, щоб ефект тривав під час події клацання. Тепер, поки це не точно для цієї потреби, її закриття. активізуватиме анімацію, поки миша не працює, а будь-які зміни, які потрібно тривати довше, потрібно проводити за допомогою JavaScript.

Увага! Особливо проста відповідь нижче! :)

Насправді ви можете змінитись, які зберігаються (наприклад, блок / спливаюче вікно, яке з’являється і залишається видимим після натискання) лише CSS (і без використання прапорця), незважаючи на те, що багато хто з (інакше правильних) відповідей тут стверджують, якщо так як вам потрібна лише наполегливість під час наведення.

Тож подивіться на відповіді Bojangles та TylerH, якщо вони працюють для вас, але якщо ви хочете, щоб відповідь була простою і CSS, яка буде блокувати видимий блок після натискання на нього (і навіть може зникнути блок з наступним клацанням), тоді дивіться це рішення.

У мене була подібна ситуація, мені знадобився спливаючий div з onClick, де я не зміг додати JS або змінити розмітку / HTML (справді рішення CSS), і це можливо з деякими застереженнями. Ви не можете використовувати цільовий трюк, який може створити приємне спливаюче вікно, якщо ви не зможете змінити HTML (щоб додати ідентифікатор), щоб його не було.

У моєму випадку спливаючий 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/

Я також вставив приклад фрагмента коду нижче, але позиціонування в пісочниці stackoverflow є дивним, тому мені довелося вводити текст "click here" після InternalDiv, який зазвичай не потрібен.

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

ви можете використовувати: target

для загальної мети

: цільовий

або фільтрувати за назвою класу

.classname: цільовий

або фільтрувати за іменем id

# ім'я: цільовий

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