javascript - "Drop"<li> 在 Bootstrap 菜单中悬停

Question

所以问题是，我必须为悬停在 bootstrap nav 上制作一个动画，如下所示:

我需要的动画是颜色线到 li 的底部，其余的"new" li 对象看起来几乎相同但背景颜色不同，所以像这样:

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

Answer 1

您可以使用 :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>