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

Question

我正在尝试为我的导航栏链接制作 hover 效果，当它们悬停时，边框底线会对其进行动画处理。我尝试过使用它：

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

这部分有效，悬停时出现底线（显然没有 animation 因为我还没有做那部分）。 问题是，当它们悬停时，不仅会出现底部边框，而且所有选项都会移动，就像边框底部导致整个导航栏向相反方向移动每个链接一样，就像他们试图彼此保持距离。 我该如何解决这个问题？ 我将留下导航栏的 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。 当 hover 时，激活 li:hover a