只是困惑为什么当鼠标悬停在 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 问题实际上是预期的行为。 border-top
和 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>
关于html - CSS 边框困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49333122/