只是困惑为什么当悬停在 border-bottom 时，边框与内容配合得很好，但当更改为 border-top 时，它会向下推内容。
这是代码...
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
position: fixed;
background-color: yellow;
}
li a {
display: block;
height: 50px;
color: red;
text-decoration: none;
text-align: center;
text-transform: uppercase;
line-height: 50px;
transition: .2s all linear;
}
li a:hover {
color: white;
border-bottom: 50px solid lightskyblue;
box-sizing: border-box;
}
<ul class="nav">
<li><a href="#peace">peace</a></li>
<li><a href="#love">love</a></li>
</ul>
我会稍微改变结构以使用覆盖而不是边框。并且无需使用固定高度。
从我看来，边界顶部问题实际上是预期的行为。两个都border-top and border-bottom将内容向下推送，但由于您正在使用box-sizing: border-box并且底部边框已经位于文本下方，您将看不到内容下降。
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: auto;
position: fixed;
background-color: yellow;
}
li a{
display: block;
position: relative;
color: red;
text-decoration: none;
text-align: center;
text-transform: uppercase;
padding: 20px;
line-height: 1;
}
li a .overlay{
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 100%;
transition: .2s all linear;
background-color: rgba(0,0,0,0.3);
}
li a:hover .overlay {
bottom: 0;
}
<ul class="nav">
<li>
<a href="#peace">
<div class="overlay"></div>
peace
</a>
</li>
<li>
<a href="#love">
<div class="overlay"></div>
love
</a>
</li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
