Question

我试图使边框显示在悬停状态，但是当我将其悬停时，会将文本上移边框大小宽度。我知道有一个解决方法，只是我不记得了。有人可以帮忙吗？附言对不起，菜鸟问题。只有最近才开始学习。

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;
}

Answer 1

诀窍是始终具有边框，除了边框通常是透明的并且在悬停时过渡为可见的颜色。下面的代码示例：

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>

悬停时，边框会向上移动文本

1 个答案: