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>

导航栏在跳跃

1 个答案: