html - 意外的导航栏在悬停时移动

Question

我试图在几个小时内修复此导航菜单.. 但我不确定悬停效果的问题出在哪里。也许填充是问题，但我可以请你指导我如何解决这个问题吗？

我想在悬停时实现这种效果，但是当我悬停导航项时，所有其他项都在移动。

这是我的代码示例。

body { background: #000; }
.navigation {
  float: right;
}
.navigation ul {
  list-style: none;
}
.navigation ul li {
  display: inline-block;
}
.navigation ul li a {
  display: block;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: #fff;
  line-height: 64px;
  text-decoration: none;
  padding: 8px 15px;
}
.navigation ul li a:hover {
  color: red;
  border: 1px solid #fff;
  border-radius: 22px;
  width: 165px;
}

<nav class="navigation">
  <ul>
    <li><a href="#">Features</a>
    </li>
    <li><a href="#">Blog</a>
    </li>
    <li><a href="#">Support</a>
    </li>
    <li><a href="#">Get Sellr Now</a>
    </li>
  </ul>
</nav>

Answer 1

您似乎在悬停时添加了 border。 border 是布局和效果尺寸的一部分。

解决此问题的一种方法是向非 :hover 规则添加相同大小的透明边框:

.navigation ul li a {
  border: 1px solid transparent;
}

您还在 :hover 上设置了 width，这当然也会影响布局。

我怀疑你想要的是:

.navigation ul li a {
  display: block;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: #fff;
  line-height: 64px;
  text-decoration: none;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 22px;
}
.navigation ul li a:hover {
  border-color:#fff;
}