Updated demo

Question

我在导航栏上使用带有悬停效果的{{1}}时遇到了一些问题。

有没有办法阻止它？或者，让我们说，给予Navbar悬停时实际的高度？

我会考虑在悬停时不改变高度的解决方案，但我会打开任何东西。

这是我的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>

Answer 2

为所有这些添加默认边框底部，并使其与背景颜色相同。

a {
  color: #ff8800;
  border-bottom: 3px solid #333;
}

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

Updated demo

更新 - 不要忘记更改活动元素的底部边框颜色

.active {
  border-bottom-color: #ff8800;
}

或者您将默认边框颜色设置为透明（可能是更好的解决方案）

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

Answer 3

正确的答案取决于您想要实现的用户体验。最简单的方法是将边框移动到<a>元素（或将悬停移动到<li>元素）。并且在所有情况下都使用3px边框 - 黑色用于非悬停，蓝色用于悬停。

像这样：https://jsfiddle.net/sh5a8v6y/

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

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

}

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

a {
  color: #ff8800;
  border-bottom: 3px solid #121214;
}

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

Answer 4

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

<强> Fiddle

Answer 5

一种简单的方法是更改ul属性，如下所示：

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

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

5 个答案:

Updated demo