css - 根据不同的跨度更改跨度的位置

Question

Inside my Pen您可以在底部看到一个带有标题的图像 block 。当用户将鼠标悬停在 block 上时，底部会显示一段描述，标题也会移动。

但是，如果说明包含 1 行文本，则标题位于正确的位置。使用 2 行文本，标题位于描述之上。我怎样才能让标题始终位于描述上方，而不将其一直移动到 block 的顶部？

.trend-block {
  position: relative;
  width: 150px;
  height: 150px;

  &:hover {
    .transition-title {
      bottom: 35px;
    }

    .trend-text {
      display: inline-block;
      width: 120px;
      color: red;
      position: absolute;
      bottom: 15px;
      padding: 0 15px;

    }
  }
}

.trend-image {
  width: 100%;
  height: 100%;
}

.trend-title {
  font-weight: bold;
  color: red;
  position: absolute;
  bottom: 15px;
  padding: 0 15px;
}

.trend-text {
  display: none;
}

.transition-title {
  transition: bottom .1s ease;
}

Answer 1

您可以使包装类成为绝对包装类而不是两个跨度 (.trend-content)； https://codepen.io/anon/pen/jxxbpx . .trend-text 现在的默认最大高度为零。当您将鼠标悬停在它上面时，最大高度将与容器相同(不能是 auto 的高度以进行转换)。