Question

嘿，我无法理解是否有任何简单的方法可以解决这个问题：我希望黑色边框位于蓝色边框的顶部，而不是延伸导航的高度。

我看了插图并在a中添加了底部，但我想覆盖.navigationbar中的那个

HTML

<nav class="navigationbar">
  <ul>
    <li>
      <a href="index.html">One</a>
    </li>
    <li>
      <a href="two.html">Two</a>
    </li>
    <li>
      <a href="three.html">Three</a>
    </li>
  </ul>
</nav>

CSS

* {
  margin: 0;
}
.navigationbar {
  background-color: #000000;
  width: 100%;
  border-bottom: .1em solid #0000FF;
}

.navigationbar ul {
  list-style-type: none;
  overflow: hidden;
}

.navigationbar ul li {
  float: left;
  color: #FFFFFF;
}

.navigationbar ul li a {
  height: 100%;
  display: block;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.navigationbar ul li a:hover {
  background: #0000FF;
  color: #FFFFFF;
  border-bottom: .1em solid #000000;
}

.navigationbar img {
  float: left;
}

https://jsfiddle.net/55r2e9bq/

Answer 1

为什么不设置边框并稍后更改颜色？

.navigationbar ul li a 
{
    border-bottom: .1em solid transparent;
}

.navigationbar ul li a:hover
{
    border-bottom-color: #000000;
}

Answer 2

您看到的边框来自您.navigationbar ul li a:hover{...}的规则border-bottom: .1em solid #000000;。它没有延伸到导航栏宽度的100％，但导致它变得更高。如果你希望navigationbar保持相同的高度，你应该将边框分配给a元素的正常状态，然后你可以将它的颜色改为你想要的颜色。

这样：

.navigationbar ul li a {
  height: 100%;
  display: block;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
  padding-bottom: 1em;

  border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */
}

Answer 3

您可以将border-bottom: 0.1em solid #000000;添加到.navigationbar ul li a以避免移动/身高增加：

https://jsfiddle.net/p7L7adhe/1/

悬停时底部边框覆盖正常

3 个答案: