html - 为什么覆盖 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;
}

更新首先，我要感谢大家对我的问题的快速回复。其次，我想让自己更清楚...并补充一些我解决的问题...

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>