html - 未显示弹出窗口

Question

我有两个并排放置的按钮，左边的按钮展开以填充空间

.left {
  overflow: hidden;
  display: block;
  width: auto;
}
.right {
  float: right;
  width: 34px;
}
<div class="right" />
<div class="left" />

即使这样也花了很长时间。最后我发现左侧需要 overflow: hidden 来正确填充空间。

现在，左键在悬停时需要弹出表单。问题是当容器具有关联的 overflow: hidden 样式时，我无法让它显示。如果没有这种样式，左侧将扩展以填充包括右侧在内的整个空间。我该如何解决这个问题？

弹出代码

#login-flyout form {
    height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 66px;
    width: 250px;
}
#login-flyout form:hover {
    height: auto;
    opacity: 0;
}

请注意，如果 overflow: hidden 从容器中移除，代码仍然有效。

此外，这是我 CSS 经验的主要收获，有没有关于容器和包含样式的引用资料可供我引用？例如，我昨天浪费了 3 个小时试图弄清楚如何在两个 float div 之间自动扩展中心 div。原来问题是容器有一个 float: right 样式，所以中心 div 需要一个 float: none。

Answer 1

看看这个解决方案 → http://jsfiddle.net/matbloom/8cYFU/

如果您正在寻找仅使用 CSS 的弹出式解决方案，请尝试实现此解决方案。隐藏的弹出窗口需要位于悬停元素容器内:

HTML:

<div class="toolbar clearfix">
    <div class="right">
        <span>Right Button</span>
    </div>
    <div class="left">
        <span>Left Button</span>
        <div id="login-flyout">
            <form>
                <input type="text" placeholder="Sample field" /><br />
                <input type="text" placeholder="Sample field" /><br />
                <input type="submit" value="GO &rarr;" />
            </form>
        </div>
    </div>
</div>

CSS:

body, input {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 15px;
    color: #333;
}

.left, .right {
    cursor: pointer;
    height: 40px;
    display: block;
    background: #ccc;
    overflow: hidden;
    padding: 0 20px;
    line-height: 40px;
}

.left:hover, .right:hover {
    background: #333;
    color: #fff;
}

.left { float: left; }
.right { float: right; }

.toolbar {
    background: #eee;
    display: block;
    position: relative;
    width: 100%;
}

#login-flyout {
    color: #fff;
    position: absolute;
    display: none;
    left: 0;
    top: 40px;
    padding: 20px;
    background: #333;
}

.left:hover #login-flyout { display: block; }

/* Clearfix */

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix {height: 1%;}