Ответ от 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; }, но это не настоящие события «щелчка». Они «живут» все время, когда элемент выбран (например, Tabс помощью клавиатуры), что немного отличается от события истинного щелчка, которое запускает действие - как правило - 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 в этой демонстрации предназначена только для стилизации элемента label. Если вам на самом деле не нужна кнопка , и достаточно старого элемента, тогда вы можете удалить почти все стили в этой демонстрации, аналогично моей второй демонстрации выше.
Вы также заметите, что у меня есть одно свойство с префиксом -moz-outline-radius. Некоторое время назад Mozilla добавила это удивительное неспецифическое свойство в Firefox, но ребята из WebKit решили, что , к сожалению, добавлять его не собираются . Так что считайте эту линию CSS просто прогрессивным улучшением для людей, которые используют Firefox.
:activeработает, когда мышь не работает. В зависимости от того, что вы пытаетесь сделать, вы можете заставить его работать, используя псевдокласс CSS4:target.