如何在NAV BAR中悬停链接

Question

我敢肯定，其他人可能会遇到同样的问题，但我不仅是CSS的新手，英语也不是我的主要语言，因此我真的不知道该如何研究如何解决这个问题。我不知道该怎么称呼这种情况。基本上，在悬停的情况下，文本稍微移动而不是留在其所属的位置。我假设我在桨上做错了什么。但是我知道，可以具有这种“按钮”效果，例如，悬停效果的背景颜色具有该大小，但我真的无法找到解决方案...我已经花了几个小时尝试不同的方法但没有成功。我也不确定我是否适当地设计了链接。有人可以帮忙吗？

这是下面的Navbar CSS代码：

 .nav-items {
    display: flex;
    transform: translateX(0px);
    margin-right: 5%;
    
  }
  
  .nav-items li {
    list-style: none;
    padding: 25px;
  }
  
  .nav-items a {
    color: white;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 14px;
  }
  
  .nav-items li a:hover {

    background-color:#006aff;
    padding: 20px;
    transition: 0.2s ease-in-out;

  }

Answer 1

如我所见，您正在悬停在悬停状态下添加填充物。

您的代码应该像这样描述的方式，要显示导航项目。

.nav-items a {

   color: white;
   text-decoration: none;
   letter-spacing: 1px;
   font-size: 14px;
   padding: 20px;
   transition: 0.2s ease-in-out;

}

.nav-items li a:hover {
    background-color: #006aff;
}