Hover animation to one item instead of all items for a menu

Question

I am trying to add a hover animation to my navigation items using Greensock animation platform. The animation works as I expect it to but it is applied to all the navigation items instead of just the item that is being hovered over. Below is a link to the code and Codepen. Any help would be much appreciated.

 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);
}

I hope this helps

Answer 2

That is because you have the same classname to all the buttons. Give each item a unique id and write mouseOver for individual ids. Give unique id for item 1, item 2, item 3... and add item-1.mouseleave, item2.mouseleave

Answer 3

You are currently selecting all elements with the underline class, but you can select the element to animate based on the element that is hovered.

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

$portfolioBtn.mouseover(function(){

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

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

$portfolioBtn.mouseleave(function(){
  let $portfolioBtnUnderline = $( this ).next( '.portfolio-btn-underline' );

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