Question

我想创建一个带有一些复选框的小表单，这些复选框仅在鼠标光标悬停在此容器上时才可见悬停效果和容器内部都没有问题但是在复选框之后还有更多的元素，当我将下面的每个元素悬停时，因为带有复选框的容器具有高度。但当我说没有高度时：自动或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;
}

CSS - 将容器悬停在一个容器上而不会向下推送更多元素

1 个答案: