Задать вопрос
@qghoul666
Студент 4 курса. Back-end. Java. Spring.
html

Как с помощью псевдокласса :checked изменить стиль другого класса?

Идея кода в том чтобы при нажатии на чекбоксы динамически изменялся z-index div блоков. Пробовал множество вариаций кода, ничего не работает. Где в моём коде ошибка? Какие есть варианты это реализовать? 

<!DOCTYPE HTML>
<html>
<head>
<title>Lab5.7</title>
<style type="text/css">
.one {
   text-align: center; font-size: 20px; background-color: Pink; color: DarkGreen; z-index: 2; height: 10em; width: 10em; position: absolute; bottom:500px; left: 400px;
}
.two {
   text-align: center; font-size: 20px; background-color: PaleGreen; color: Blue; z-index: 3; height: 10em; width: 10em; position: absolute; bottom:500px; left: 700px;
}
.three {
   text-align: center; font-size: 20px; background-color: LightYellow; color: Purple; z-index: 4; height: 10em; width: 10em; position: absolute; bottom:350px; left: 550px;
}
.four {
   text-align: center; font-size: 20px; background-color: PowderBlue; color: Olive; z-index: 3; height: 10em; width: 10em; position: absolute; bottom:200px; left: 400px;
}
.five {
   text-align: center; font-size: 20px; background-color: Lavender; color: Maroon; z-index: 2; height: 10em; width: 10em; position: absolute; bottom:200px; left: 700px;
}
#cb1:checked ~ .one{
   z-index: 11;
}
#cb2:checked ~ .two{
   z-index: 11;
}
#cb3:checked ~ .three{
   z-index: 11;
}
#cb4:checked ~ .four{
   z-index: 11;
}
#cb5:checked ~ .five{
   z-index: 11;
}
</style>
</head>
<body>
<form>
<table width="300" border="0" align="left" cellpadding="6">
<tr>
   <th align="center" colspan="2">Виберіть ваші інтереси:</th>
</tr>
<tr>
   <th align="right"><label for="cb1"> 1</label></th>
   <th align="center"><input type="checkbox" name="rg1"id="cb1"></th>
</tr>
<tr>
   <th align="right"><label for="cb2"> 2</label></th>
   <th align="center"><input type="checkbox" name="rg1"id="cb2"></th>
</tr>
<tr>
   <th align="right"><label for="cb3"> 3</label></th>
   <th align="center"><input type="checkbox" name="rg1"id="cb3"></th>
</tr>
<tr>
   <th align="right"><label for="cb4"> 4</label></th>
   <th align="center"><input type="checkbox" name="rg1"id="cb4"></th>
</tr>
<tr>
   <th align="right"><label for="cb5"> 5</label></th>
   <th align="center"><input type="checkbox" name="rg1"id="cb5"></th>
</tr>
<tr>
   <th align="right"><input type="submit" value="Вибрати" id ="b1"></th>
   <th align="center"><input type="reset" value="Відмовитись" id ="b2"></th>
</tr>
</table>
</form>
<div class="one"> Блок1 </div>
<div class="two"> Блок2 </div>
<div class="three"> Блок3 </div>
<div class="four"> Блок4 </div>
<div class="five"> Блок5 </div>

</body>
</html>
  • Вопрос задан
  • 235 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
Rucklless
@Rucklless
селектор ~ подразумевает что в правиле "#cb3:checked ~ .three" #cb3 и .three находятся в одном родителе

<!DOCTYPE HTML>
<html>
<head>
<title>Lab5.7</title>
<style type="text/css">
.one {
   text-align: center; font-size: 20px; background-color: Pink; color: DarkGreen; z-index: 2; height: 10em; width: 10em; position: absolute; bottom:500px; left: 400px;
}
.two {
   text-align: center; font-size: 20px; background-color: PaleGreen; color: Blue; z-index: 3; height: 10em; width: 10em; position: absolute; bottom:500px; left: 700px;
}
.three {
   text-align: center; font-size: 20px; background-color: LightYellow; color: Purple; z-index: 4; height: 10em; width: 10em; position: absolute; bottom:350px; left: 550px;
}
.four {
   text-align: center; font-size: 20px; background-color: PowderBlue; color: Olive; z-index: 3; height: 10em; width: 10em; position: absolute; bottom:200px; left: 400px;
}
.five {
   text-align: center; font-size: 20px; background-color: Lavender; color: Maroon; z-index: 2; height: 10em; width: 10em; position: absolute; bottom:200px; left: 700px;
}
#cb1:checked ~ .one{
   z-index: 11;
}
#cb2:checked ~ .two{
   z-index: 11;
}
#cb3:checked ~ .three{
   z-index: 11;
}
#cb4:checked ~ .four{
   z-index: 11;
}
#cb5:checked ~ .five{
   z-index: 11;
}
</style>
</head>
<body>
<form>

   <th align="right"><label for="cb1"> 1</label></th>
   <input type="checkbox" name="rg1"id="cb1">

   <th align="right"><label for="cb2"> 2</label></th>
   <input type="checkbox" name="rg1"id="cb2">

   <th align="right"><label for="cb3"> 3</label></th>
   <input type="checkbox" name="rg1"id="cb3">

   <th align="right"><label for="cb4"> 4</label></th>
   <input type="checkbox" name="rg1"id="cb4">

   <th align="right"><label for="cb5"> 5</label></th>
   <input type="checkbox" name="rg1"id="cb5">

   <th align="right"><input type="submit" value="Вибрати" id ="b1">
   <input type="reset" value="Відмовитись" id ="b2">
<div class="one"> Блок1 </div>
<div class="two"> Блок2 </div>
<div class="three"> Блок3 </div>
<div class="four"> Блок4 </div>
<div class="five"> Блок5 </div>

</body>
</html>
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Записать рекламные видео креативы для мобильной игры
25 нояб. 2024, в 05:56
3000 руб./за проект
Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)
25 нояб. 2024, в 03:04
500000 руб./за проект
Сделать простой лендинг
25 нояб. 2024, в 02:45
2000 руб./за проект
Ещё заказы