html - 无法访问悬停的 div 中的内容

Question

我有以下设置:

    .container .option {
      position: absolute;
      display: none;
      background-color: gray;
      padding: 5px;
    }
    
    .container:hover .option {
      display: block;
    }

<div class="container">
        <div class="card">
          <p>Hover here</p>
        </div>
        <div class="option">
          <input type="checkbox" />
          <label>Option 1</label>
        </div>
        <div class="option">
          <input type="checkbox" />
          <label>Option 2</label>
        </div>
      </div>
      <div>
        Other content
      </div>

https://plnkr.co/edit/AbLUqAkMT9DyJqr0D1oc?p=preview

如果我在 .container .option 选择器上有 position:absolute，悬停的内容会正确地漂浮在“其他内容”div 上。但是，我无法访问悬停的 div 中的复选框。如果我删除 position:absolute 我可以访问复选框，但内容不会正确 float 。

Answer 1

更改一点标记和样式，如下所示:

<div class="container">
  <div class="card">
      <p>Hover here</p>
  </div>
  <div class="popup">
      <div class="option">
        <input type="checkbox"/>
        <label>Option 1</label>
      </div>
      <div class="option">
          <input type="checkbox"/>
          <label>Option 2</label>
      </div>
  </div>
</div>
<div>
  Other content
</div>

.container {
  position:relative;
}
.container .popup {
  position: absolute;
  display: none;
  background-color: gray;
  padding: 5px;
}

.container:hover .popup {
  display: block;
  left:0px;
  top:100%;
}

https://plnkr.co/edit/BsRDdVCM27AQr7TeRoui?p=preview