如何在ul li a标签上制作悬停效果
提问于 2020-04-12 13:53:32
我正在尝试为我的导航栏链接制作一个悬停效果，当它们悬停时，边框底线会动画显示它的位置。我试过使用这个：
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？或者我的所作所为毫无意义？我还在学习，所以我有可能把事情搞得一团糟。
这是一个截图，以防万一：
谢谢你的社区！
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-12 14:09:11
这是你想要的吗？(你必须全屏查看才能获得良好的可视化效果)
* {
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>
Stack Overflow用户
发布于 2020-04-12 14:19:27
添加
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:悬停a
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61172532
复制相关文章
点击加载更多
腾讯云开发者
