使用Nextjs和GSAP在标题悬停时动态显示图像

npx create-next-app my-app

cd my-app

npm install gsap

import { useEffect } from 'react';
import gsap from 'gsap';

const IndexPage = () => {
  useEffect(() => {
    const title = document.querySelector('.title');
    const image = document.querySelector('.image');

    title.addEventListener('mouseenter', () => {
      gsap.to(image, { opacity: 1, duration: 0.5 });
    });

    title.addEventListener('mouseleave', () => {
      gsap.to(image, { opacity: 0, duration: 0.5 });
    });
  }, []);

  return (
    <div>
      <h1 className="title">标题</h1>
      <img className="image" src="/path/to/image.jpg" alt="图像" style={{ opacity: 0 }} />
    </div>
  );
};

export default IndexPage;

npm run dev