В общем, имеем блок. К нему подключен стиль :active и прозрачность. Смысл в том, чтобы при нажатии на блок он становился прозрачным. Однако, когда отводишь мышку, то он снова становится не прозрачным, а это уже ни к чему. Нужно чтобы после нажатия он всегда оставался прозрачным. Как такое сделать? Подозреваю, что без JavaScript такое сделать невозможно?..
можно сделаь через label,
вариант 1 - переключатель с возвратом:
html:
<label class="switch">
<input type="checkbox"/>
<div></div>
</label>
css:
.switch div {
background-color: red;
height: 140px;
width: 220px;
}
.switch input:checked + div {
opacity: 0.3;
}
.switch input {
display: none;
}
http://jsfiddle.net/sa81jgvm/2/
вариант 2 - переключатель в одну сторону
html:
<input type="checkbox" id="switch"/>
<div><label for="switch"></label></div>
css:
#switch + div {
background-color: red;
height: 140px;
width: 220px;
}
#switch + div label {
width: 100%;
height: 100%;
display: block;
padding: 0;
margin: 0;
}
#switch:checked + div {
opacity: 0.3;
}
#switch:checked + div {
pointer-events: none;
}
#switch {
display: none;
}
Тут не обойтись лишь стилями, ты прав. Вот набросок того, что тебе нужно, если я правильно понял: http://jsfiddle.net/sa81jgvm/1/