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

Question

我正在尝试为我的导航栏链接制作悬停效果，其中当它们悬停时，边框底线会以动画方式进入。我尝试使用此：li:hover a {box-sizing: border-box;width: 100%;border: solid #F5F5F5 5px;padding: 5px;border-top: 0px;border-left: 0px;border-right: 0px;}这部分有效，悬停时会出现底线（显然没有动画，因为我还没有执行该部分）。问题是，当它们悬停时，不仅会出现底部边框，而且所有选项也会移动，就像边框底部导致整个导航栏向相反方向稍微移动每个链接一样，就像它们试图彼此保持距离。我该如何解决这个问题？我将保留导航栏的 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 应该添加到导航栏？或者我所做的一切毫无意义？我仍在学习，所以我可能会搞砸。这是一个屏幕截图，以防万一：悬停导航栏的屏幕截图感谢社区！

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。悬停时，激活 li:hover a