1

В общем, имеем блок. К нему подключен стиль :active и прозрачность. Смысл в том, чтобы при нажатии на блок он становился прозрачным. Однако, когда отводишь мышку, то он снова становится не прозрачным, а это уже ни к чему. Нужно чтобы после нажатия он всегда оставался прозрачным. Как такое сделать? Подозреваю, что без JavaScript такое сделать невозможно?..

3 ответа 3

4

можно сделаь через 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/3/

4
  • КРУТЯК!!! Большое спасибо! Это именно то, что нужно было!!!
    – Mimino
    1 фев 2015 в 15:37
  • я там немного тормознул, чтобы получить эфект второго варианта, в первом надо всего лишь radio сделать вместо чекбокса.
    – zb'
    1 фев 2015 в 15:42
  • Точно! Уже проверил! Большое Вам спасибо! Всё работает на УРА! :)
    – Mimino
    1 фев 2015 в 16:50
  • @Mimino, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).
    – zb'
    1 фев 2015 в 16:51
1

Тут не обойтись лишь стилями, ты прав. Вот набросок того, что тебе нужно, если я правильно понял: http://jsfiddle.net/sa81jgvm/1/

0

В некоторых случаях удобней по селектору #target

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.