在悬停时移动文本而不移动其容器

Question

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

两个解决方案确实将文本移动到容器内，但也可以向上/向下移动容器本身（或增加高度？）：

使用第一个解决方案的示例：

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

我将如何继续解决这个问题？我一直在尝试不同的想法（例如，容器中有隐藏溢出的容器等等），但到目前为止还没有任何工作。

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>

Answer 2

只需填充即可轻松实现，例如：

body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font: 11pt/1.5em sans-serif;
}

nav {
  display: flex;
}

a {
  padding: 2em 3em;
  background: lightslategray;
  color: white;
  text-decoration: none;
  transition: padding 0.15s, background 0.3s;
}

a:hover {
  padding-top: calc(2em - 2px);
  background: darkslategray;
}

<nav>
<a href="#">First</a>
<a href="#">Second</a>
<a href="#">Third</a>
</nav>

或者，使用嵌套容器和transform：

body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font: 11pt/1.5em sans-serif;
}

nav {
  display: flex;
  width: 100%;
}

a {
  padding: 2em 3em;
  background: lightslategray;
  color: white;
  text-decoration: none;
  transition: background 0.3s;
}

a div {
  transition: transform 0.15s;
}

a:hover {
  background: darkslategray;
}

a:hover div {
  transform: translateY(-2px);
}

<nav>
<a href="#"><div>First</div></a>
<a href="#"><div>Second</div></a>
<a href="#"><div>Third</div></a>
</nav>

使用transform（和opacity）进行过渡/动画应该有some performance benefits，但我怀疑这对于这个简单的过渡来说是重要的还是值得注意的......