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

Posted 2023-03-06

【中文标题】"Drop" <li> 悬停在引导菜单中

【英文标题】："Drop" <li> hover in bootstrap menu

【发布时间】：2016-07-02 21:16:03

【问题描述】：

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

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

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

【参考方案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;

【讨论】：

对不起，我知道我的英语远非完美，但事实并非如此。我需要的是你所做的之间的动画：第一个状态 - 当颜色线和其他“正方形”下降时的动画，以及最后一个状态

不幸的是，这是我能给你的最佳答案。 jsfiddle.net/qz723h79

【参考方案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>

【讨论】：

我不知道不使用 javascript 是可能的！非常感谢！