html - 导航栏在跳跃

Question

当菜单中的任何链接悬停在整个栏上时，我不知道该怎么做((

这是 css 代码，抱歉，如果它乱七八糟，我是新手。

.nav{
    margin: 0;
    padding: 0;
    text-align: center;
    padding-right: 48px;
    padding-top: 12px;
}

.nav li{
    display: inline;
}

.nav a{
    display: inline-block;
    padding: 10px;
}

a {
    color: #fff;
    font: 25px/1 Courier New, monospace;
    text-decoration: none;
    width: 15%; 
    vertical-align: middle;
}

a:link {color: #fff; text-decoration: none; font-weight: normal;}
a:visited {color: #fff; text-decoration: none; font-weight: normal;}
a:active {color: #fff; text-decoration: none;}
a:hover {font-family: Courier; color: #600080; text-decoration:none; font-weight: none;text-transform: uppercase; position: sticky;}
a:hover { font-size: 215%; }

Answer 1

问题的原因在这里:

a:hover {
  font-size: 215%;
}

随着字体大小的增加，它会使 a 元素变大，从而使您的 li 和 nav 变大。有多种方法可以解决此问题。最简单的方法之一是适应 a 的增长。如果您在悬停时检查该元素，该元素将变为 122px(在我的示例中)。如果我设置一个 min-height 较大的 a 大小是适应和“转移”不会发生:

a {
  min-height: 130px;
}

现在，如果您的链接是动态的或可翻译的，这可能对您不起作用。您可以使用 scale 而不是增加 font-size 这使得元素在不插入其父维度的情况下增长:

a:hover {
  transform: scale(2.15);
} 

body {
  background: #333;
}

.nav {
  margin: 0;
  padding: 0;
  text-align: center;
  padding-right: 48px;
  padding-top: 12px;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  padding: 10px;
}

a {
  color: #fff;
  font: 25px/1 Courier New, monospace;
  text-decoration: none;
  width: 15%;
  vertical-align: middle;
}

a:link {
  color: #fff;
  text-decoration: none;
  font-weight: normal;
}

a:visited {
  color: #fff;
  text-decoration: none;
  font-weight: normal;
}

a:active {
  color: #fff;
  text-decoration: none;
}

a:hover {
  font-family: Courier;
  color: #600080;
  text-decoration: none;
  font-weight: none;
  text-transform: uppercase;
  position: sticky;
}

a:hover {
  transform: scale(2);
}

<ul class="nav">
  <li><a href="">Nav Link One</a></li>
  <li><a href="">Nav Link Two</a></li>
  <li><a href="">Nav Link Three</a></li>
  <li><a href="">Nav Link Four</a></li>
</ul>