使文本块覆盖覆盖整个按钮答案

【问题标题】：Making text block overlay cover the whole button使文本块覆盖覆盖整个按钮
【发布时间】：2022-06-23 18:15:07
【问题描述】：

我有以下代码。现在覆盖出现了，但它不在图像的顶部 - 它从图像下方开始。我想让它当我将鼠标悬停在按钮上时，"wheel-display-overlay" 类中的信息是可见的，并且占据了按钮的整个宽度和高度，并且位于图像的顶部。

button.wheel-display-button {
  background-color: white;
  background-size: cover;
  border-color: black;
  display: inline-block;
  height: 400px;
  padding: 0px;
  width: 20%;
}

button.wheel-display-button:hover .wheel-display-base {
  display: none;
}

button.wheel-display-button .wheel-display-overlay {
  display: none;
}

button.wheel-display-button:hover .wheel-display-overlay {
  background: black
  color: white;
  display: inline-block;
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%;
}

<button class="wheel-display-button" 
        <img src="variant.image"/>
        <span class="wheel-display-base">        
                <p>Brand</p>
        </span>
        <span class="wheel-display-overlay">
                <p>Model</p>
                <p>Size</p>
        <span>
</button>

【问题讨论】：

标签： html css

【解决方案1】：

希望它是您正在寻找的。p>

button.wheel-display-button {
  background-color: white;
  background-size: cover;
  border-color: black;
  display: inline-block;
  height: 400px;
  padding: 0px;
  width: 20%;
  position:relative;
  
}

button.wheel-display-button:hover .wheel-display-base {
  display: none;
}

button.wheel-display-button .wheel-display-overlay {
  display: none;
}

button.wheel-display-button:hover .wheel-display-overlay {
  background: black
  color: white;
  display: inline-block;
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

}

【讨论】：