我有两个并排放置的按钮,左边的按钮展开以填充空间
.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
。
最佳答案
看看这个解决方案 → 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 →" />
</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%;}
关于html - 未显示弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18305526/