Question

我想添加一个border-bottom，当我用鼠标悬停在它上面时会显示。我希望它覆盖下面的边框，所以看起来它会改变颜色。可在此处找到此示例http://www.formaplex.com/services（在导航栏中）

这是一个jsfiddle https://jsfiddle.net/ey006ftg/

另外，一个小问题：有没有人知道为什么链接之间存在小的差距（从链接到链接时可以看到）以及如何摆脱它。

由于

Answer 1

只需将此添加到您的css：

nav a {
    border-bottom: solid transparent 3px;
}

这是一个包含上述代码的jsfiddle：https://jsfiddle.net/AndrewL32/ey006ftg/1/

Answer 2

<强> fiddle demo

只需将默认边框设置为透明 - 在悬停时更改颜色

nav ul li a {
    display: block;
    padding: 21px 0;
    font-size: 18px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: solid transparent 3px; /* add this! */
    transition:0.3s; /* or even this :) */
}

Answer 3

试试这个fiddle

要按照您想要的方式设置border-bottom，您必须像这样为锚标记添加边框：

nav ul li a {
    display: block;
    padding: 21px 0;
    font-size: 18px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 3px solid black;
}

并确保菜单项之间的空间不见了，请使用一点修复程序为菜单中的li标记添加负边距，如下所示：

nav ul li {
    display: inline-block;
    width: 17%;
    margin-right: -4px;

}

Answer 4

您可以使用负边距覆盖下面的边框，如下所示：

nav {
  border-top: 1px solid grey;
  border-bottom: 3px solid black;
  width: 100%;
  font-size:0;
}
nav ul {
  width: 1056px;
  margin: 0 auto;
  text-align: center;
  width: 1056px;
}
nav ul li {
  display: inline-block;
  width: 17%;
}
nav ul li a {
  display: block;
  padding: 21px 0;
  font-size: 18px;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
}
nav a:hover {
  color: orange;
  transition: 0.2s;
  border-bottom: solid orange 3px;
  margin-bottom: -10px;
}
a {
  color: black;
  text-decoration: none;
  outline: 0;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Careers</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

对于fighting the inline gap，看到您为a标记稍后定义了字体大小，我只需添加font-size:0，我将其添加到nav中以上代码段。

覆盖边框而不移动它

4 个答案: