html - 使用 border-bottom 时防止 HTML/CSS-Navbar 改变高度

Question

在我的导航栏上使用带有悬停效果的 border-bottom 时，我遇到了一个小问题。

有什么办法可以阻止吗？或者，比方说，给 Navbar 一个悬停时实际应该达到的高度？

我更喜欢不改变悬停高度的解决方案，但我对任何事情都持开放态度。

这是我的导航栏的 JSFiddle:https://jsfiddle.net/ay3u7trd/

谢谢!

Answer 1

将 border-bottom: 3px solid RGBA(0,0,0,0); 添加到您的 a { } 。这将为您的所有超链接添加 3px 填充，而不应用特定颜色(将显示对象固有的背景颜色)。

然后一旦 :hover 效果发生，它就显示在那里，因为边框已经存在，所以你没有奇怪的高度问题。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #121214;
  z-index: 10;
  text-transform: uppercase;
  
}

li {
  float: left;
  border-right: 1px solid #121214;
  text-decoration: none;
}

a {
  color: #ff8800;
  border-bottom: 3px solid RGBA(0,0,0,0);
}

a:hover {
  color: #ff8800;
  text-decoration: none;
  border-bottom: 3px solid #1290FF;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #ff8800;
  text-decoration: none;
  color: #121214;
  transition: background 0.3s ease-in;
}

.active {
  background-color: #ff8800;
  color: #121214;
  text-decoration: none;

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>