html - 悬停时向上移动文本而不移动其容器

Question

我在网上搜索了解决方案，每个人都建议使用 position: relative 和 top: -2px 或者 margin-top: -2px.

这两种解决方案确实都将文本移动到容器内，但也将容器本身向上/向下移动(或增加高度？):

使用第一种解决方案的示例:

a {
    position: relative;
}
a:hover {
    top: -2px;
}

我该如何继续解决这个问题？我一直在尝试不同的想法(例如，将容器放在容器中并 overflow hidden 等)，但到目前为止没有任何效果。

Answer 1

您可以使用padding 来改变文本位置并给父元素一个固定的高度。然后，在悬停时降低 padding-top 值，这会将文本推到顶部。

.wrap {
  background: #eeeeee;
  display: block;
  height: 50px;
}

a {
  padding: 15px;
  position: relative;
  display: block;
  transition-duration: 0.2s;
}

a:hover {
  padding-top: 10px;
  transition-duration: 0.2s;
}

<div class="wrap">
  <a href="#">Text</a>
</div>