html - CSS - 悬停容器而不向下推更多元素

Question

我想创建一个带有一些复选框的小表单，这些复选框仅在鼠标光标悬停在该容器上时可见。
hover效果和里面的容器都没有问题。
但是在那个复选框之后还有更多的元素，当我将鼠标悬停在下面的每个元素时，下面的每个元素都会向下移动，因为带有复选框的容器有一个高度。但是，当我在悬停时说没有 height:auto 或 100% 时，我只能触及一个复选框。

<form>
<input type="text" name="something">
<div class="cb-container">
  <input type="checkbox" name="first" value="first">
  <input type="checkbox" name="second" value="second">
  <input type="checkbox" name="third" value="third">
</div>
<input type="submit">
</form>

<style type="text/css">
  .cb-container {
    height:25px;
    overflow:hidden;
    position:relative;
    z-index:1;
  }
  .cb-container:hover {
    display:block;
    height:auto;
    overflow:visible;
    position:relative;
    z-index:1;
  }
</style>

一些开场动画会很好，但这对我来说是另一项任务。首先，我想了解为什么我不能打开容器。提交按钮而不是按下他。

Answer 1

这可能对你有帮助! http://jsfiddle.net/13cjn242/

.cb-container {
 height:25px;
 opacity:0;
}
.cb-container:hover { 
 opacity:1;
}