"Drop" <li> 悬停在引导菜单中

Question

所以问题是，我必须在引导导航上制作一个悬停动画，如下所示：

我需要的动画是去 li 底部的颜色线，其余的“新” li 对象看起来几乎相同，但背景颜色不同，所以像这样：

我意识到（可能）无法更改边框顶部的位置，所以我是否需要在每个 li 上方添加一些其他对象，以便在悬停时“覆盖”它？我真的不知道如何创建它。 非常感谢您的帮助。

Answer 1

我想这就是你的意思，但我可能错了。 JSFIDDLE

div {
  width: 200px;
  height: 200px;
  background-color: grey;
  border-top: 3px solid black;
}

div:hover {
  background-color: #aaa;
  border-bottom: 3px solid black;
  border-top: none;
}

Answer 2

您可以使用:after 伪元素 创建叠加层，并在悬停时将其高度更改为0。您也可以添加top: 100%，这将创建幻灯片到底部的过渡。

* {
  box-sizing: border-box;
}

ul {
  display: flex;
  max-width: 400px;
  padding: 0;
  list-style-type: none;
  margin: 0 auto;
}

li {
  flex: 1;
  position: relative;
  padding: 20px 0;
  text-align: center;
  border-right: 1px solid #D8D9DB;
}

li:after {
  position: absolute;
  transition: all 0.3s ease-in;
  content: '';
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #E3E3E5;
  z-index: -1;
  border-top: 5px solid black;
}

li:hover:after {
  height: 0;
  bottom: 0;
  top: 100%;
}

<ul>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
</ul>

或者您可以删除height: 0 和bottom: 0 并使用top: 100%，您会得到这样的结果

* {
  box-sizing: border-box;
}

ul {
  display: flex;
  max-width: 400px;
  padding: 0;
  list-style-type: none;
  margin: 0 auto;
}

li {
  flex: 1;
  position: relative;
  padding: 20px 0;
  text-align: center;
  border-right: 1px solid #D8D9DB;
}

li:after {
  position: absolute;
  transition: all 0.3s ease-in;
  content: '';
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #E3E3E5;
  z-index: -1;
  border-top: 5px solid black;
}

li:hover:after {
  top: 100%;
}

<ul>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
</ul>