时间戳

首页 > 解决方案 > jQuery 监控链接以查看它们是否悬停，如果它们上升 3 个父级并添加 css/class

javascript - jQuery 监控链接以查看它们是否悬停，如果它们上升 3 个父级并添加 css/class

问题描述

我的页面上有很多链接，其 HTML 格式为：

<div class="heading-column">
    <div class="heading-container">
        <h2 class="heading-item">
            <a href="/find/">Find</h2>
        </div>
    </div>
</div>

目前我们有一些动画在它们悬停在heading-column元素上时发生，但它们实际上应该只在悬停在a超链接上时发生。

我试图弄清楚如何创建一些 jQuery 来监视所有超链接，如果一个具有类的超链接.heading-item a悬停在它上面以.heading-column通过添加 css 来更新其父级 3 更高（），pointer-events: auto;但只要鼠标停止悬停，应删除此 CSS 规则，以便pointer-events: none;停止.heading-column动画/悬停发生

我非常感谢一些帮助

标签： javascriptjquery

解决方案

看看这是否有帮助 -

https://codepen.io/VweMWoz

const tl = gsap.timeline({paused: true});

tl.from(
    ".gsap-swipe",
    {
      y: 20,
      x: 20,
      rotate: -40,
      duration: 3,
      transformOrigin: '30% 80%',
      ease: Elastic.easeOut.config(1, 0.5),
    }, 0
  )
  .fromTo(
    ".swipe",
    {
      xPercent: -100
    },
    {
      duration: 1,
      xPercent: 100,
      ease: Sine.easeInOut,
      stagger: {
        each: 0.15
      }
    }, 0
  )
  .from(
    ".maskSwipe",
    {
      xPercent: -100,
      ease: Sine.easeInOut
    },
    0.4
  )
  .from(
    "#hello",
    {
      duration: 1.5,
      drawSVG: "0%"
    },
    1
  )
  .from(
    ".swoop",
    {
      duration: 2,
      drawSVG: "0%"
    },
    1
  )
  .from(
    ".line",
    {
      drawSVG: "0%",
      duration: 0.5,
      stagger: {
        each: 0.2
      }
    },
    1
  )
  .from(
    ".shape",
    {
      scale: 0,
      duration: 1.3,
      transformOrigin: "50% 50%",
      rotate: '+=random(-60, 60)',
      ease: Elastic.easeOut.config(1, 0.8),
      stagger: {
        each: 0.2
      }
    },
    0.2
  );

// ScrubGSAPTimeline(tl);

let hover = document.querySelector('.js-hover');

hover.addEventListener('mouseover', playTl);
hover.addEventListener('mouseout', resetTl);

function playTl(){
  tl.timeScale(1.25).restart();
}

function resetTl(){
  tl.progress(0).pause();
}

推荐阅读