使用 tweenMax 在悬停时显示边框

Question

我试图通过 JS 将鼠标悬停在 html 元素上时添加彩色边框，我选择使用 TweenMax 库，我是新手所以我不太明白是什么我做错了吗这是我的，我从今天早上开始尝试修改代码但收效甚微这是我的功能：

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>

它应该显示红色边框和其他一些基于我在上面调用的 lvBtnUnderline 函数的动画，但似乎没有任何效果，有人可以解释一下问题出在哪里吗？

Answer 1

您的HTML无效。 p 标签内不能有 div。

其次，没有变量 $p（至少在您共享的代码中）。解决这些问题，有效：

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

使用 tweenMax 在悬停时显示边框

display border on hover using tweenMax

javascript

gsap