使用 Flexbox 悬停时隐藏图像并显示文本区域答案

【问题标题】：Hiding image and showing text area when hovering with Flexbox使用 Flexbox 悬停时隐藏图像并显示文本区域
【发布时间】：2020-10-25 21:42:53
【问题描述】：

我有一个 div，其中包含一个图像，以及它下方的另一个 div 用于描述，我正在使用 flexbox 将它们彼此对齐，但是我有一个隐藏的 div，当我悬停时我想显示它来代替图像在瓷砖上，但目前我的代码无法正常工作，并且无法在悬停时为该 div 提供该区域的完整高度。这是我的代码：

:root{
  --colorOrange: #ef5b2b;
  --colorGrey: #f5f5f5;
  --colorBlue: #0a2756;
}

.presenter {
  width: 23%;
  max-height: 320px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
.presenter img{
  width: 100%;
}

.presenter-solid{
  background: var(--colorBlue);
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  font-family: Poppins;
  display:none;
}
.presenter:hover img{
  display:none;
}
.presenter:hover .presenter-solid{
  display:block;
  height: 100%;

}

<div class="presenter">
      <div class="presenter-image-holder">
        <img src="https://cdn2.vectorstock.com/i/thumb-large/80/91/person-gray-photo-placeholder-little-boy-vector-22808091.jpg" />
        <div class="presenter-solid">
          <span>TOM CRUISE</span>
        </div>
      </div>
      <div class="presenter-role">
        <span class="role-name">Hollywood Actor</span>
      </div>
</div>

当我试图悬停时，它也会给我一个闪烁的效果。如何修复我的代码？我做错了什么？

【问题讨论】：

用你的架构，你需要 JS。您只能将 :hover 应用于同一元素或其子元素。但不是对兄弟姐妹或父母。
但我正在将鼠标悬停在演示者容器本身上，隐藏图像然后显示其他内容。

标签： html css flexbox

【解决方案1】：

使用display: flex; align-items: center; justify-content: center 使文本居中。

:root{
  --colorOrange: #ef5b2b;
  --colorGrey: #f5f5f5;
  --colorBlue: #0a2756;
}

.presenter {
  display: inline-block;
  position: relative;
  margin-bottom: 20px;
}
.presenter-image-holder {
  position: relative; /* this must be added to the parent element */
  width: 250px; /* width of the image box */
  height: 250px; /* height of the image box */
  margin-bottom: 10px;
}
.presenter img{
  max-width: 100%;
  height: auto;
}

.presenter-solid{
  background: var(--colorBlue);
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  font-family: Poppins;
  display:none;
}
.presenter:hover img{
  display:none;
}
.presenter:hover .presenter-solid{
  height: 100%; 
  width: 100%;
  display: flex;
  align-items: center; /* to vertically center the text */
  justify-content: center; /* to horizontally center the text */
}

<div class="presenter">
    <div class="presenter-image-holder">
        <img src="https://cdn2.vectorstock.com/i/thumb-large/80/91/person-gray-photo-placeholder-little-boy-vector-22808091.jpg" />
        <div class="presenter-solid">
            <span>TOM CRUISE</span>
        </div>
    </div>
    <div class="presenter-role">
        <span class="role-name">Hollywood Actor</span>
    </div>
</div>

【讨论】：

谢谢。我必须在我丢失的容器上设置高度。