我试图使边框显示在悬停状态,但是当我将其悬停时,会将文本上移边框大小宽度。我知道有一个解决方法,只是我不记得了。有人可以帮忙吗? 附言对不起,菜鸟问题。只有最近才开始学习。
nav ul li a{
color: white;
font-size: 1.8rem;
font-weight: 700;
text-decoration: none;
border: #eee;
border-bottom: 3px solid transparent;
transition: 0.2s;
}
nav ul li:hover{
color: white;
border: #e1e1e1;
border-bottom: 2px solid #d0d0d0;
}
答案 0 :(得分:0)
诀窍是始终具有边框,除了边框通常是透明的并且在悬停时过渡为可见的颜色。下面的代码示例:
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
border-bottom: 2px solid transparent;
transition: 0.2s;
cursor: pointer;
}
nav ul li:hover {
border-bottom: 2px solid #d0d0d0;
}
<nav>
<ul>
<li><a>first</a></li>
<li><a>second</a></li>
<li><a>third</a></li>
</ul>
</nav>