Как при помощи CSS менять при нажатии цвет

238
16 января 2018, 11:14
<div class="first-div">
 <div>
 </div>
</div>

div находится во внешнем <div class="first-div">, как при нажатии на <div class="first-div"> менять стиль внутреннего div, а при ещё одном нажатии откатывать назад. Желательно с использованием только css.

Answer 1

В CSS3 клик можно обрабатывать благодаря вот такому "костылю" с чекбоксом:

.first-div { 
  width: 180px; 
  height: 180px; 
  border: 1px solid black; 
  position: relative; 
} 
 
label { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
} 
 
input { 
  display: none; 
} 
 
.first-div > div { 
  width: 50px; 
  height: 50px; 
  border: 1px solid red; 
  margin: 20px; 
} 
 
input:checked ~ div { 
    border-color: green; 
}
<div class="first-div"> 
 <label for="toggle"></label> 
 <input type="checkbox" id="toggle"> 
 <div> 
 
 </div> 
</div>

То есть Вы создаёте чекбокс и скрываете его. Создаёте label для этого чекбокса и с помощью позиционирования накладываете label на весь внешний блок. Получается, что вроде как Вы кликаете по блоку, но на самом деле по label. И чекбокс меняет свою активность.

А уже стили внутреннего блока вы ставите в зависимость от того, активен чекбокс или нет.

Answer 2

Можно задать цвет в .first-div через color (напр. color: red), а в дочернем использовать переменную current-color (background: currentColor), вот пример - https://codepen.io/anon/pen/zpLRar

.first-div { 
  color: yellow; 
} 
 
.first-div div { 
  background: currentColor; 
} 
 
.first-div p { 
  color: black; 
} 
 
.first-div:active { 
  color: red; 
}
<div class="first-div"> 
  <div> 
    <p> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel aperiam illo fugiat inventore nostrum eligendi incidunt, velit doloribus corporis praesentium assumenda, harum ea quisquam accusamus soluta sit nesciunt sequi. Suscipit. 
    </p> 
  </div> 
</div>

Также если нужно именно toggle-поведение, то вместо div использовать label и checkbox с ним:

#myCheckbox { 
  display: none; 
} 
 
#myCheckbox:checked + .first-div { 
  color: red; 
}
<input type="checkbox" id="myCheckbox" /> 
<label for="myCheckbox" class="first-div"> 
 <!-- your code --> 
</label>

Answer 3

На чистом css я не вижу способа, как это можно реализовать (при наведении легко, а вот при нажатии уже хз)

Но можно простой строчкой на jquery это сделать: При нажатии на div - его дочернему div либо дается новый класс red, либо убирается, если он уже есть

<div class="first-div" onclick="$('.first-div > div').toggleClass('red');">
 <div>
 </div>
</div>
Answer 4

Вариант на css с использованием псевдокласса :target

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
#parent { 
  border: 2px solid #00f; 
  position: relative; 
  width: 150px; 
  height: 150px; 
  margin: 15px auto; 
} 
 
#parent a[href="#parent"], 
#parent a[href="#parentHidden"] { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  font-size: 0; 
} 
 
#parent a[href="#parent"] { 
  display: block; 
  color: #555; 
} 
 
#parent a[href="#parentHidden"] { 
  display: none; 
} 
 
#parent .childDiv { 
  line-height: 150px; 
  text-align: center; 
} 
 
#parent .childDiv:before { 
  content: '✔'; 
  position: absolute; 
  top: 0; 
  right: 0; 
  width: 20px; 
  height: 20px; 
  line-height: 20px; 
  background: green; 
  color: #fff; 
  opacity: 0; 
} 
 
#parent:target a[href="#parent"] { 
  display: none; 
} 
 
#parent:target a[href="#parentHidden"] { 
  display: block; 
} 
 
#parent:target .childDiv { 
  display: block; 
  color: #f00; 
} 
 
#parent:target .childDiv:before { 
  opacity: 1; 
}
<div id="parent"> 
  <a href="#parent" tabindex="1">label</a> 
  <a href="#parentHidden" tabindex="1">label hidden</a> 
 
  <div class="childDiv">Child</div> 
</div>

READ ALSO
Галерея imageflow [требует правки]
CSS

Галерея imageflow [требует правки]

Товарисчи помогите, начал разбираться с галереей, столкнулся с проблемой увеличения картинки при нажатии на неё мышойВот сайт: http://davidoff

 171
Прокрутка колесиком в Chrome и Opera
CSS

Прокрутка колесиком в Chrome и Opera

ЗдравствуйтеНе работает вертикальная прокрутка на моем разрабатываемом сайте, именно колесиком в Chrome и Opera (версии самые новые), остальными...

 148
Выбрать новости по по максимальной дате
MySQL

Выбрать новости по по максимальной дате

Есть SQL запрос нужно выбрать новости с самым большим годом, например все новости за последний год вот sql Но такой запрос работает

 220
Ошибка MySQL при создании поля
MySQL

Ошибка MySQL при создании поля

При попытке создать поле типа TEXT и присвоить ему стандартное значение "NULL", MySQL выдаёт ошибку #1067 - Invalid default value for 'name' Как исправить?

 234