javascript - 将动画悬停在菜单的一项而不是所有项目上

Question

我正在尝试使用 Greensock 动画平台向我的导航项添加悬停动画。动画按照我的预期工作，但它应用于所有导航项目，而不仅仅是悬停在其上的项目。下面是代码和 Codepen 的链接。任何帮助将非常感激。

let $portfolioBtn = $('.portfolio-btn');
let $portfolioBtnUnderline = $('.portfolio-btn-underline');

$portfolioBtn.mouseover(function() {
  TweenMax.to($portfolioBtnUnderline, 0.5, {
    scaleX: 1,
    ease: Power4.easeInOut,
  })
});

$portfolioBtn.mouseleave(function() {
  TweenMax.to($portfolioBtnUnderline, 0.5, {
    scaleX: 0,
    ease: Power4.easeInOut,
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

<nav class="menu">
  <ul class="active">
    <li>
      <a class="portfolio-btn" href="#">About</a>
      <div class="portfolio-btn-underline"></div>
    </li>
    <li>
      <a class="portfolio-btn" href="#">Item 1</a>
      <div class="portfolio-btn-underline"></div>
    </li>
    <li>
      <a class="portfolio-btn" href="#">Item 2</a>
      <div class="portfolio-btn-underline"></div>
    </li>
    <li>
      <a class="portfolio-btn" href="">Item 3</a>
      <div class="portfolio-btn-underline"></div>
    </li>
    <li>
      <a class="portfolio-btn" href="#">Contact</a>
      <div class="portfolio-btn-underline"></div>
    </li>
  </ul>
</nav>

https://codepen.io/rp20/pen/WdrwWP

Answer 1

HTML

  <nav class="menu">
      <ul class="active">
        <li>
          <a class="portfolio-btn" href="#">About</a>
        </li>
        <li>
          <a class="portfolio-btn" href="#">Item 1</a>
        </li>
        <li>
          <a class="portfolio-btn" href="#">Item 2</a>
        </li>
        <li>
          <a class="portfolio-btn" href="">Item 3</a>
        </li>
        <li>
          <a class="portfolio-btn" href="#">Contact</a>
        </li>
      </ul>
    </nav>

CSS

.portfolio-btn {
  position: relative;
  color: #000;
  text-decoration: none;
}
.portfolio-btn:hover {
  color: #000;
}
.portfolio-btn:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.portfolio-btn:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

希望这有帮助