主页 / 问题 / 1088933
Accepted
Проста Miha
Asked:2020-02-29 19:15:52 +0000 UTC2020-02-29 19:15:52 +0000 UTC

当您单击图标时出现一个div，请帮助

  • 772

单击右侧的按钮（输入）时，应该扩展一个 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>

html

1 个回答

  1. Best Answer

    如果您使用 help 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>

    • 1

相关问题