html - 将鼠标悬停在 div 上的纯 CSS 隐藏内容然后显示新文本

Question

我想在 div 列元素中显示一些内容（一个图标和一些标题文本）。当我将鼠标悬停在文本上时，我试图通过在旧内容上转换一个框来隐藏内容，然后在新颜色之上显示更多信息

我目前正在使用 :before 伪元素来转换新的背景颜色，该背景颜色最初为 0 不透明度，然后向上过渡并完全不透明度。我似乎无法让我的孩子 div 然后显示在顶部。

.feature {
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 5%;
  text-align: center;
  box-sizing: border-box;
}

.feature h2 {
  font-size: 1.5em;
  color: #006699;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.feature a {
  text-decoration: none;
}

.feature .icon {
  font-size: 3em;
  color: #575757;
}

.feature:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 0;
  background-color: #003366;
  transition: all 0.33s ease;
  z-index: 10;
}

.feature .details {
  display: none;
  z-index: 15;
}

.feature:hover:before {
  height: 100%;
  opacity: 1;
  box-shadow: inset 0px 0px 2px 2px rgba(75, 179, 219, 0.75);
  z-index: 10;
}

.features:hover .details {
  display: block;
  color: #fff;
}

<div class="feature h_medium bg-gray radius-2">
  <div class="icon mb-15">
    <i class="fas fa-people-carry"></i>
  </div>
  <h2>Main Title</h2>
  <div class="details">
    <h2>Main Title (again)</h2>
    <p>Some level of content that describes the title</p>
  </div>
</div>

我希望悬停首先填充功能元素上的蓝色框覆盖 - 然后我希望详细信息 div 填充在蓝色框上

标签： htmlcsscss-transitions

Answer 1

这是我给你的解决方案。希望它能满足您的要求。我只是在以下块中进行了一些更改。如果您遇到任何问题，请随时告知。

.feature .details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:block;
    opacity: 0;
    z-index: 15;
}

.feature:hover .details {
    opacity: 1;
    transition: all 0.33s ease .2s;
} 

.feature {
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 5%;
    text-align: center;
    box-sizing: border-box;
}

.feature h2 {
    font-size: 1.5em;
    color: #006699;
    margin-top: 0;
    margin-bottom: 0.5em;
}

.feature a {
    text-decoration: none;
}

.feature .icon {
    font-size: 3em;
    color: #575757;
}

.feature:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 0;
    background-color: #003366;
    transition: all 0.33s ease;
    z-index: 10;
}

.feature .details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:block;
    opacity: 0;
    z-index: 15;
}

.feature:hover:before {
    height: 100%;
    opacity: 1;
    box-shadow: inset 0px 0px 2px 2px rgba(75,179,219,0.75);
    z-index: 10;
}

.feature:hover .details {
    opacity: 1;
    transition: all 0.33s ease .2s;
}

<div class="feature h_medium bg-gray radius-2">
        <div class="icon mb-15">
            <i class="fas fa-people-carry"></i>
        </div>
        <h2>Main Title</h2>
        <div class="details">
            <h2>Main Title (again)</h2>
            <p>Some level of content that describes the title</p>
    </div>
    </div>