As a div appeared when you click on the icon, please help

Question

При нажатие на кнопку (input) с правой стороны должен выдвигаться div, но что-то пошло не так.

* {
  margin: 0;
  padding: 0;
  outline: none;
}

.block_head {
  position: absolute;
  top: 0;
  right: 0;
  width: 10rem;
  height: 100vh;
  overflow: hidden;
}

.block_menu {
  position: absolute;
  height: 4rem;
  width: 4rem;
}

.button_menu {
  position: absolute;
  width: 4rem;
  height: 4rem;
  z-index: 20;
  border-radius: 80px;
  opacity: 0;
  cursor: pointer;
}

.menu_list {
  position: relative;
  width: 10rem;
  height: 100vh;
  right: -10rem;
  background-color: black;
  transition: 1s;
}

.button_menu:checked~.menu_list {
  transform: translateX(-100%);
}

.block_menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border-radius: 50%;
}

.fa-times-circle {
  font-size: 4rem;
  font-weight: 1;
  transition: .4s;
  transform: rotate(45deg);
}

.button_menu:checked~.fa-times-circle {
  transform: rotate(0deg);
}

<script src="https://kit.fontawesome.com/4fcf22c1ce.js"></script>
<section class="head">
  <div class="block_head">
    <div class="block_menu">
      <input type="checkbox" class="button_menu">
      <i class="fas fa-times-circle"></i>
    </div>
    <div class="menu_list">

    </div>
  </div>
</section>

Answer 1

Если делаете при помощи input:checked ~ elem, то учитывайте, что сам инпут должен находиться на уровне с тем ~ elem или выше.

Пример:

#check_one:checked ~ .check_one {
  color: green;
}

#check_two:checked ~ .check_two {
  color: green;
}

<input id="check_one" type="checkbox">
<div class="check_one">При нажатии на чекбокс надпись станет зелёной</div>
<br><br>
<div>
  <input id="check_two" type="checkbox">
</div>
<div class="check_two">При нажатии на чекбокс - ничего не изменится</div>

БЛОГ НА HUSL

As a div appeared when you click on the icon, please help

Ответы (1 шт):