Search code examples
javascriptgsap

display border on hover using tweenMax

I am trying to add a colored border when I hover on the html element through JS, I'm chooses to use TweenMax library and i'm new to it so I don't really understand what am I doing wrong this is my, I'm trying to tweek the code since this morning with little success this is my function: 

self.$('p').hover(function() {
       console.log('ok');
       var $t = $(this);
       var $a = $(this).find('a');
       $(this).lvBtnUnderline('over');
       TweenMax.to($p, .5, {
       color: '#FF0000'
    });
    TweenMax.to($t, .5, {
       borderLeftColor: '#FF0000',
       opacity: .5
    });
    }, function() {
      var $t = $(this);
       var $a = $(this).find('a');
      $(this).lvBtnUnderline('out');
      TweenMax.to($p, .5, {
        color: '#FFFFFF'
      });
TweenMax.to($t, .5, {
    borderLeftColor: '#FFFFFF',
    opacity: 0
});
});

    this is my html element     
       <p>
        <a class="certificato" 

         href="../sites/all/themes/lazzeri/assets/ifs_certificato.pdf" 
         target="_blank">
         <div>Scarica Certificato IFS</div>
         <div class="underline"></div>
        </a>
        </p>

It should display a red border and some other animations based on .the lvBtnUnderline function I'm calling above but nothing seems to work, can someone explain me where is the problem?

Solution

  • Your HTML is invalid. You can't have a div inside of a p tag.

    Second, there is no variable $p (at least in the code that you shared). Fixing those issues, it works:

    https://codepen.io/GreenSock/pen/MWYeaXq?editors=0010