Question

我正在尝试制作一个界面，该界面可以打开一个包含多个可拖动模块的部分。

我首先使用复选框 hack 制作界面的骨架来打开和关闭该部分，但由于某种原因我无法与里面的 div 进行交互。每当我输入“光标：移动；”鼠标没有反应，甚至无法选择 div。

我试图给出“光标：移动；”到父元素以查看正在与哪个 div 进行交互，它是“.sections”，但我不知道该 div 中的什么会产生这种行为。

代码如下：

<div class="warper">

  <form class="mode">
    <label>
      <input type="radio" name="mode" value="simple" checked>
      <span>Simple</span>
    </label>
    <label>
      <input type="radio" name="mode" value="avance">
      <span>Avancé</span>
    </label>
  </form>
  <div class="sections">      
    <input type="checkbox" id="sections" value="sections">
    <label for="sections">Sections</label>
    <div class="winsec win1">
      <div class="tsection"></div>
    </div>
  </div>
  <div class="sections">  
    <label for="sections2">Sections</label>
    <input type="checkbox" id="test" value="sections2">
    <div class="winsec win2">
      <div class="tsection"></div>
    </div>
  </div>
</div>

    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, Helvetica, sans-serif;
      display: flex;
      width: 100%;
      height: 200vh;
      background-color: #d3c7ae;
      flex-direction: column;
    }
    
    .warper {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      padding: 2em 4em;
      background-color: #706c63;
      border: 3px solid blue;
    }
    
    
    .sections {
      position: relative;
      height: auto;
      display: flex;
      flex-flow: row wrap;
      margin: 0 auto;
      width: 24rem;
      border: 2px solid pink;
      transition: 0.4s;
      overflow: hidden;  
      cursor: pointer;
    }
    
    
    .sections label {
      border: 2px solid red;
      width: 100%;
    }
    
    
    .sections input {
      position: absolute;
      top: 0;
      left: 0;
      border: 2px solid yellow;
      width: 100%;
      height: 22px;
      cursor: pointer;
    }
    
    .winsec {
      pointer-events: none;
      height: 0em;
      width: 100%;
      border: 2px solid green;
      background: green;  
    }
    
    #sections:checked ~ div,
    #test:checked ~ div {
      height: 15rem;
      transition: 0.4s ease-out;
    }
    
    #sections:not(:checked) ~ div,
    #test:not(:checked) ~ div {
      height: 0rem;
      transition: 0.4s ease-out;
    }
    
    .tsection {
      height: 50px;
      width: 50px;
      background: $brown;
      cursor: move;
    }
    
    .mode {
      display: flex;
      margin: 0 auto;
      max-width: 24em;
      padding: 0 1.5em;
      border: 3px solid pink;
    }
    
    .mode,
    .mode label {
      width: 100%;
    }
    
    .mode label {
      cursor: pointer;
      position: relative;
      height: auto;
    }
    
    .mode label span {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.5em 2em;
      background: $brown;
      color: $beige;
      transition: 0.5s;
    }
    
    input[type=radio] {
      position: absolute;
      opacity: 0;
      height: 0;
      width: 0;
    
    }
    
    input[type=checkbox] {
      opacity: 0;
    }
    
    .mode label input:checked + span {
      opacity: 1;
      background: $green;
    }
    
    .mode label input:focus {
      outline: transparent;
    }

无法与其容器内的 div 交互

0 个答案: