如何在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

这是你问的吗？（您必须全屏查看才能获得良好的可视化效果）* {&nbsp; margin: 0px;&nbsp; padding: 0px;&nbsp; box-sizing: border-box;}body {&nbsp; background-color: #900c3f;}img {&nbsp; width: 130px;&nbsp; margin-top: 20px;&nbsp; margin-left: 20px;&nbsp; margin-bottom: 20px;}.nav-links {&nbsp; display: flex;&nbsp; justify-content: space-between;&nbsp; width: 80%;&nbsp; &nbsp; &nbsp;}.nav-links li {&nbsp; list-style: none;}.nav-links a {&nbsp; text-decoration: none;&nbsp; font-family: Poppins;&nbsp; color: #F5F5F5;&nbsp; letter-spacing: 3px;&nbsp; font-weight: bold;&nbsp; font-size: 130%;&nbsp; margin: 10px;}.nav-links li a:hover {&nbsp; border-bottom: 5px solid white;&nbsp; padding-bottom: 3px;}<ul class="nav-links">&nbsp; <li><a href="">HOME</a></li>&nbsp; <li><a href="">PORTFOLIO</a></li>&nbsp; <li><a href="">SUBMIT</a></li>&nbsp; <li><a href="">CONTACT</a></li>&nbsp; <li><a href="">ABOUT</a></li></ul>

Answer 2

添加li&nbsp;a&nbsp;{box-sizing:&nbsp;border-box;width:&nbsp;100%;padding:&nbsp;5px;border-top:&nbsp;0px;border-bottom:0px;border-left:&nbsp;0px;border-right:&nbsp;0px;}注意：加载时，显示 li a。悬停时，激活 li:hover a