当另一个 div 悬停在上面时使 div 向上滑动答案

【问题标题】：Make div slide up when another div is hovered on当另一个 div 悬停在上面时使 div 向上滑动
【发布时间】：2019-03-23 08:25:04
【问题描述】：

我有一个名为 case-card 的块，它由一个名为 case-card__wrapper 的子 div 组成，其中包含文本。

在case-card 悬停时，我希望case-card__wrapper 稍微向上移动。不是在一个动作中，而是作为过渡。

我觉得我有一个大致的想法，但不确定如何让过渡工作？目前，它只是从一个位置转移到另一个位置：

.case-card {
    height: 560px;
    width:600px;
    color: #ededed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    transform: translateY(20px);
    transition: all .3s ease-in-out;
    background-color: #333; 
    overflow: hidden;
}
.case-card__wrapper{
    position: absolute;
    transition: 0.5s;
    /*top: 0; Don't want to add this because I want the text to be centered in the div and rather not define a number since the div heights may vary  */
}
.case-card__title{
  font-size: 16px;
}
.case-card:hover .case-card__wrapper {
  top: 150px;
}

<div class="case-card">
  <div class="case-card__wrapper">
    <h4 class="case-card__title">Title</h4>
    <p class="case-card__subtitle">Subtitle</p>
  </div>
</div>

我正试图通过 CSS 来做到这一点。有什么想法吗？

【问题讨论】：

标签： html css

【解决方案1】：

如果您无法设置初始值，只需使用 transfrom。你也可以删除position:absolute

.case-card {
    height: 560px;
    width:600px;
    color: #ededed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    transform: translateY(20px);
    transition: all .3s ease-in-out;
    background-color: #333; 
    overflow: hidden;
}
.case-card__wrapper{
    transition: 0.5s;
 }
.case-card__title{
  font-size: 16px;
}
.case-card:hover .case-card__wrapper {
  transform:translateY(-100%);
}

<div class="case-card">
  <div class="case-card__wrapper">
    <h4 class="case-card__title">Title</h4>
    <p class="case-card__subtitle">Subtitle</p>
  </div>
</div>

【讨论】：