覆盖边界而不移动它

Question

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

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

另外，一个小问题：有谁知道为什么 link 之间有一个小间隙（从 link 悬停到 link 时可以看到）以及如何摆脱它。

谢谢

Answer 1

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

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 2

只需将此添加到您的 css:

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

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

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

并确保菜单项之间的 space 消失了，使用一个小修复程序，在菜单内的 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 ] 在上面的代码片段中。

覆盖边界而不移动它

Override a border without moving it

html

css

border

nav