如何在ul li a标签上制作悬停效果

Question

我正在尝试为我的导航栏 links 制作悬停效果，当它们悬停在其中时，边框底线会动画化它的方式。我试过使用这个：

li:hover a {
box-sizing: border-box;
width: 100%;
border: solid #F5F5F5 5px;
padding: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

这部分有效，悬停时出现底线（显然没有动画，因为我还没有做那部分）。问题是，当它们悬停时，不仅会出现底部边框，而且所有选项都会移动，就像边框底部导致整个导航栏每个 link 向相反方向移动一点，就像如果他们试图彼此保持距离。我该如何解决这个问题？我将留下导航栏的 HTML 代码和一些 css 代码：

HTML:

    <ul class="nav-links">
    <li><a href="">HOME</a></a></li>
    <li><a href="">PORTFOLIO</a></a></li>
    <li><a href="">SUBMIT</a></a></li>
    <li><a href="">CONTACT</a></a></li>
    <li><a href="">ABOUT</a></a></li>
    </ul>

CSS:

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

body {
background-color: #900c3f;
}

img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}

nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}

li:hover a {
box-sizing: border-box;
width: 100%;
border: solid #F5F5F5 5px;
padding: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
}

.nav-links li {
list-style: none;
}

.nav-links a {
text-decoration: none;
font-family: Poppins;
color: #F5F5F5;
letter-spacing: 3px;
font-weight: bold;
font-size: 130%;
}

是否有任何 div 应该添加到导航栏？或者我在做什么没有意义？我还在学习，所以我可能会把事情搞得一团糟。

为了以防万一，这里有一张截图：

Screenshot of hovered navbar

感谢 SO 社区！

Answer 1

这是你问的吗？（您必须全屏查看以获得良好的视觉效果）

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #900c3f;
}

img {
  width: 130px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  width: 80%;     
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  font-family: Poppins;
  color: #F5F5F5;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 130%;
  margin: 10px;
}

.nav-links li a:hover {
  border-bottom: 5px solid white;
  padding-bottom: 3px;
}

<ul class="nav-links">
  <li><a href="">HOME</a></li>
  <li><a href="">PORTFOLIO</a></li>
  <li><a href="">SUBMIT</a></li>
  <li><a href="">CONTACT</a></li>
  <li><a href="">ABOUT</a></li>
</ul>

Answer 2

添加

li a {box-sizing: border-box;width: 100%;padding: 5px;border-top: 0px;border-bottom:0px;border-left: 0px;border-right: 0px;}

注意：加载时显示li a。悬停时，active li:hover a

如何在ul li a标签上制作悬停效果

How to make a hover effect on ul li a tag

html

css

hover

navbar