html - 在链接上使用 CSS 转换时不稳定

Question

我有一个页脚导航。导航是一个无序列表，有六个列表项，每个列表项都有一个 anchor 或链接标记。

现在我的问题是，当我将鼠标悬停在基本上是链接的列表项上时(在 Y 轴上翻译 -3px --> 根据 CSS 代码)但是当它返回到链接或正常状态时链接文本上下移动。

是什么导致了这种异常行为？

我对 CSS 和 HTML 很熟悉。

我在某处读到过 (backface visibility: hidden;) 但不知道如何使用它以及在哪里使用它可以以某种方式解决这个问题但是正如我之前所说的我开始使用 CSS 所以有点困惑它是如何工作的.

.nav {
  list-style: none;
  padding: 4rem;
  background-color: #101d2c;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 2rem;
  align-items: center;
}

.nav__link:link,
.nav__link:visited {
  text-decoration: none;
  font-size: 1.4rem;
  font-family: 'Josefin Sans', sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding: 1.5rem;
  display: block;
  transition: all .2s;
}

.nav__link:active,
.nav__link:hover {
  background-color: rgba(#fff, .05);
  transform: translateY(-3px);
}

<ul class="nav">
  <li class="nav__item"><a href="#" class="nav__link">Find your dream home</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Request proposal</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Download home planner</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Contact us</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Submit your property</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Come work with us!</a></li>
</ul>

Answer 1

我无法向您解释为什么 CSS 转换不流畅，但这是一个常见问题，我发现自己每天都在整个网络上注意到这一点。 CSS 有许多奇怪的错误和缺陷，目前这就是其中之一。

这里有一个解决您的问题的方法，这样您至少可以在没有不稳定文本的情况下实现您想要的:

删除 css 转换并添加负上边距:

.nav__link:active,
.nav__link:hover {
  background-color: rgba(#fff, .05);
  transform: translateY(-3px); <-- remove this line
  margin-top: -6px; <-- add this line
}

我使用了 6px 的负上边距(-6px)，因为这看起来与使用 3px 的 css transform translate 非常相似。

https://codepen.io/anon/pen/yZweLp?editors=1100#0