css - CSS – 边框底部的过渡不起作用

Question

当光标悬停在链接上时，我希望在我的标题导航上有一个边框底部过渡。当我第一次实现它时它正在工作，但是在添加了更多代码之后，我无法让它工作。

我的 CSS 看起来像这样：

a:link,
a:visited {
  color: #1c2234;
  text-decoration: none;
  padding-bottom: 20px;
  border-bottom: 3px solid transparent;
  -webkit-transition: border-bottom 0.2s, color 0.2s;
  transition: border-bottom 0.2s, color 0.2s;
}

a:hover,
a:active {
  color: #555;
  border-bottom: 3px solid #1c2234;
}

这是标题的图片

我知道这样做的一个常见问题是在悬停之前没有设置边框底部，但我已经这样做了并将其设置为透明。悬停时颜色会发生变化，但边框未显示。有任何想法吗？谢谢！

标签： csswebkit

Answer 1

刚刚想通了。我正在调用overflow: hidden我的 .main-nav 类，这隐藏了我的边界底部。