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 px ..您需要将这些内容添加到.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财产如下，

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>

为什么叠加div不能取父级的尺寸

2 个答案: