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个小时试图找出如何在两个div之间自动扩展中心float divs。结果问题是容器的样式为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%;}

弹出窗口未显示

1 个答案: