＆＃34;删除＆＃34; <li>悬停在引导程序菜单中

Question

所以问题是，我必须做一个动画，用于悬停在bootstrap导航上，如下所示：

我需要的动画是与李的底部的颜色线，其余的＆＃34; new＆＃34;看起来几乎相同但背景颜色不同的li对象，如下所示：

我意识到它（可能）不可能改变边界顶部的位置，所以我需要在每个li之上需要一些其他物体，这将覆盖＆＃39;它在悬停？我真的不知道如何创建它。 非常感谢您的帮助。

Answer 1

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

＆＃13;

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者您可以删除height: 0和bottom: 0，然后只使用top: 100%，您就会得到类似的内容

＆＃13;

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

#include "LinkedList.h"
#include <iostream>
LinkedList::LinkedList()
{
    Node FirstNode;
    Start = Current = &FirstNode;
    cout << "Start = " << Start->Str.Integer << endl;
    cout << "Current = " << Current->Str.Integer << endl;
}
void LinkedList::add(int a)
{
    Node n;
    n.Str.Integer = a;
    Current->next = &n;
    Current = Current->next;
    cout << Current->Str.Integer;
}