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

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;
}

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

我怀疑你想要的是：

.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;
}

Answer 2

您需要设置常量的项目宽度，最好对齐文本中心以防止鼠标进入时跳转项目文本

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;
  width: 165px;
  line-height: 64px;
  text-decoration: none;
  text-align: center;
  padding: 8px 15px;
  margin: 0;
  transition: all 0.5s ease;
  border: 1px solid transparent;
  border-radius: 20px;
}
.navigation ul li a:hover {
  color: red;
  border: 1px solid #fff;
  border-radius: 28px;
  width: 165px;
  text-align: center;
 
}

<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>