不同鼠标离开的 CSS 过渡答案

【问题标题】：CSS transition with different mouse leave不同鼠标离开的 CSS 过渡
【发布时间】：2021-10-11 19:44:47
【问题描述】：

我正在尝试实现类似于此 gif 中所示的行为。

我尝试通过jQuery在mouseleave之后添加一个类，我也尝试将背景作为线性渐变，不幸的是我无法弄清楚如何在移动鼠标后做出效果。非常感谢您的任何建议。

HTML：

<ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link" href="./eshop.html">E-shop</a>
    </li>
  </ul>

SCSS：

.nav-item {
display: flex;
flex-direction: row;
transform: skewX(-25deg);
border-right: 1px solid #9e8451;
margin: 0 0.5rem;

.nav-link {
  font-weight: 500;
  color: #c09f62 !important;
  font-size: 1.15rem;
  text-transform: uppercase;
  transform: skewX(25deg);
  padding: 1.25rem 1.85rem !important;
  transition: 0s text-shadow;
}

&::after {
  content: "";
  width: 100%;
  background: #312612;
  transition: all 1s linear;
  position: absolute;
  right: -200%;
  top: 0;
  height: 100%;
  display: block;
  z-index: -1;
}

&.active,
&:hover {
  font-weight: bold;

  &::after {
    right: 0;
  }

  .nav-link {
    color: #f8d696 !important;
    text-shadow: 0 0 15px #f2c87b;
    transition-delay: 1.15s;
    font-weight: bold;
  }
}
  }

【问题讨论】：

标签： css sass hover

【解决方案1】：

将您的 .nav-item z-index 设置为小于 ::after 伪元素，并在悬停或活动时增加 .nav-item 上的 z-index。以下是实现这一目标的方法。

  .nav-item {
    display: flex;
    flex-direction: row;
    transform: skewX(-25deg);
    border-right: 1px solid #9e8451;
    margin: 0 0.5rem;
    
    
    .nav-link {
      font-weight: 500;
      color: #c09f62 !important;
      font-size: 1.15rem;
      text-transform: uppercase;
      transform: skewX(25deg);
      padding: 1.25rem 1.85rem !important;
      transition: 0s text-shadow;
        z-index:0;
    }
    
    &::after {
      content: "";
      width: 100%;
      background: #312612;
      opacity:.5;
      transition: all 1s linear;
      position: absolute;
      right: -200%;
      top: 0;
      height: 100%;
      display: block;
      z-index: 1;
    }
    
    &.active,
    &:hover {
      font-weight: bold;
    
      &::after {
        right: 0;
      }
    
      .nav-link {
        color: #f8d696 !important;
        text-shadow: 0 0 15px #f2c87b;
        transition-delay: 1.15s;
        font-weight: bold;
        z-index:2;
      }
    }
  }

【讨论】：