爲什麼覆蓋div不能採取父母的尺寸

Question

我想創建一個按鈕。 當鼠標懸停包裝div（ks-wrapper）時，會出現另一個div（ks-overlay）（在開始時隱藏）並隱藏基礎div（ks-button）。 它也有必要的按鈕沒有固定的尺寸。

有什麼建議嗎？

HTML

<div class="ks-wrapper"> 
    <div class="ks-button"> 
    <div class="ks-header"> 
     Header 
    </div> 
    <div class="ks-content"> 
Text 
    </div> 
    </div> 
    <div class="ks-overlay"> 
    "K" 
    </div> 
</div> 

CSS

.ks-wrapper { 
    position: relative; 
    float: left; 
    height: 85px; 
    width: 100%; 
} 
.ks-button { 
    position: absolute; 
    color: white; 
    width: 100%; 
    height: 100%; 
} 
.ks-header{ 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
    background-color:yellow; 
    max-height:20px; 
    font-size:20px; 
    font-weight:bold; 
    text-align:center; 
    color:black; 
    padding:5px; 
} 

.ks-content{ 
    border-bottom-left-radius:10px; 
    border-bottom-right-radius:10px; 
    background-color:grey; 
    font-size:20px; 
    font-weight:bold; 
    text-align:center; 
    color:black; 
    padding:5px; 
    height:100%; 
} 

.ks-wrapper .ks-overlay { 
    transition: visibility 0s, opacity 0.5s ease-in-out; 
    position: absolute; 
    color: yellow; 
    background-color: green; 
    width: 97.5%; 
    height: 85px; 
    visibility: hidden; 
    opacity: 0; 
    border-radius:10px; 
    padding:10px; 
    overflow:hidden; 
} 

.ks-wrapper:hover .ks-overlay { 
    visibility: visible; 
    opacity: 1; 
} 

UPDATE 對於開始，我要感謝大家的對我的問題快速響應。 其次，我想讓自己更清楚...並且還添加了一些我發現的問題...

1）此按鈕將用於響應模板。 有沒有可能按鈕沒有固定的高度，覆蓋層是否跟隨這個高度？

2）如何完成過渡和鼠標離開（過渡只能在懸停中）？

3）此按鈕停留在以下元素

的頂部這是表示問題的link in the fiddle。

謝謝你很多關於你的時間

Answer 1

頭正在20像素的頂部..你需要這些壽添加到您的.ks-wrapper .ks-overlay {

.ks-wrapper { 
 
    position: relative; 
 
    float: left; 
 
    height: 85px; 
 
    width: 100%; 
 
} 
 
.ks-button { 
 
    position: absolute; 
 
    color: white; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.ks-header{ 
 
    border-top-left-radius:10px; 
 
    border-top-right-radius:10px; 
 
    background-color:yellow; 
 
    max-height:20px; 
 
    font-size:20px; 
 
    font-weight:bold; 
 
    text-align:center; 
 
    color:black; 
 
    padding:5px; 
 
} 
 

 
.ks-content{ 
 
    border-bottom-left-radius:10px; 
 
    border-bottom-right-radius:10px; 
 
    background-color:grey; 
 
    font-size:20px; 
 
    font-weight:bold; 
 
    text-align:center; 
 
    color:black; 
 
    padding:5px; 
 
    height:100%; 
 
} 
 

 
.ks-wrapper .ks-overlay { 
 
    transition: visibility 0s, opacity 0.5s ease-in-out; 
 
    position: absolute; 
 
    color: yellow; 
 
    background-color: green; 
 
    width: 97.5%; 
 
    height: 105px; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    border-radius:10px; 
 
    padding:10px; 
 
    overflow:hidden; 
 
} 
 

 
.ks-wrapper:hover .ks-overlay { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<div class="ks-wrapper"> 
 
    <div class="ks-button"> 
 
    <div class="ks-header"> 
 
     Header 
 
    </div> 
 
    <div class="ks-content"> 
 
Text 
 
    </div> 
 
    </div> 
 
    <div class="ks-overlay"> 
 
    "K" 
 
    </div> 
 
</div>

Answer 2

可能是你正在說.ks-overlay其中overflow browser width某個屏幕size之後，如果那麼那是因爲padding加入了那個，用css box-sizing屬性如下，

盒上漿屬性用於改變用於計算元件的寬度和高度的默認CSS盒模型 。

.ks-wrapper { 
 
    position: relative; 
 
    float: left; 
 
    height: 85px; 
 
    width: 100%; 
 
} 
 
.ks-button { 
 
    position: absolute; 
 
    color: white; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.ks-header{ 
 
    border-top-left-radius:10px; 
 
    border-top-right-radius:10px; 
 
    background-color:yellow; 
 
    max-height:20px; 
 
    font-size:20px; 
 
    font-weight:bold; 
 
    text-align:center; 
 
    color:black; 
 
    padding:5px; 
 
} 
 

 
.ks-content{ 
 
    border-bottom-left-radius:10px; 
 
    border-bottom-right-radius:10px; 
 
    background-color:grey; 
 
    font-size:20px; 
 
    font-weight:bold; 
 
    text-align:center; 
 
    color:black; 
 
    padding:5px; 
 
    height:100%; 
 
} 
 

 
.ks-wrapper > .ks-overlay { 
 
    transition: visibility 0s, opacity 0.5s ease-in-out; 
 
    position: absolute; 
 
    color: yellow; 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 85px; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    border-radius:10px; 
 
    padding:10px; 
 
    overflow:hidden; 
 
    left:0; 
 
    box-sizing:border-box; 
 
} 
 

 
.ks-wrapper:hover .ks-overlay { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<div class="ks-wrapper"> 
 
    <div class="ks-button"> 
 
    <div class="ks-header"> 
 
     Header 
 
    </div> 
 
    <div class="ks-content"> 
 
Text 
 
    </div> 
 
    </div> 
 
    <div class="ks-overlay"> 
 
    "K" 
 
    </div> 
 
</div>