未顯示彈出按鈕

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 divs之間的中心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%;}