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

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

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

Answer 2

我认为这就是你想要实现的目标

<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 class="other">
      Other content
    </div>

.container .option {
  display: none;
  padding: 5px;
}

.container{
  position: absolute;
  background-color: gray;
  top: 0;
}

.container:hover .option {
  display: block;
}

.other{
  margin-top: 50px;
}

https://plnkr.co/edit/2Ei8oE0aadOqifkatyR7?p=preview

Answer 3

如果你问我这个解决方案更清洁，因为

可以点击标签（也可以使用for = name存档）
它实际上使用的是无法使用的.card-class
更短更容易理解
可以通过复制和粘贴菜单上方或下方的文本来控制弹出窗口的位置，该类名称是“hoverme”＆＃39;这里
为整个菜单增加一个div，允许里面的元素尊重它们的大小，并按预期方式对齐。

＆＃13;

      .container>.card .hoverme
      {
        display:none;
        position:absolute;
        background:#ccc;
      }
      
      .container>.card:hover .hoverme
      {
        display:inline;
      }

＆＃13;

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

＆＃13;

无法访问悬停的div

3 个答案: