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

Question

我有一个动态呈现的标题列表，当我将鼠标悬停在每个标题上时，我想显示一个图像。当我将鼠标悬停在标题上时，会显示所有图像。我仍然是 React 的菜鸟。我认为解决方案很简单，但我没有找到。

Component.js

import React, { useEffect, useRef } from "react";
import { Row, Col } from "react-bootstrap"
import Link from "next/link";
import gsap from "gsap";
import { getStrapiMedia } from "../lib/media";


const Articles = ({ articles }) => {

  const itemsRef = useRef({});

  const handleHover = (e) => {
    gsap.to(".imgHome", {
      display: "block"
    })
  }

  const handleHoverExit = (e) => {
    gsap.to(".imgHome", {
      display: "none"
    })
  }

  return (
    <div>
      <div className="tableau">
            {articles.map((item) => (
              <Row key={item.id}
                onMouseEnter={(e) => handleHover(e)}
                onMouseOut={(e) => handleHoverExit(e)}
                ref={el => (itemsRef.current[item.id] = el)}>
                <Link href={`/article/${item.id}`}>
                  <a className="titre"
                  >{item.title} </a>
                </Link>
                <img className="imgHome" src={getStrapiMedia(item.image.url)}
                  width="800" />
              </Row>
            ))}
      </div>
    </div>
  )
}

export default Articles

Answer 1

您可以在 <img> 元素上使用 refs，然后在 gsap.to 函数调用中引用它们，而不是使用 .imgHome class。

const Articles = ({ articles }) => {
    const imagesRef = useRef({});

    const handleHover = (e, id) => {
        gsap.to(imagesRef.current[id], { display: "block" })
    }

    const handleHoverExit = (e, id) => {
        gsap.to(imagesRef.current[id], { display: "none" })
    }

    return (
        <div>
            <div className="tableau">
                {articles.map((item) => (
                    <Row key={item.id}
                        onMouseEnter={(e) => handleHover(e, item.id)}
                        onMouseOut={(e) => handleHoverExit(e, item.id)}
                    >
                        <Link href={`/article/${item.id}`}>
                            <a className="titre">{item.title} </a>
                        </Link>
                        <img 
                            ref={(el) => (imagesRef.current[item.id] = el)} 
                            className="imgHome" 
                            src={getStrapiMedia(item.image.url)} 
                            width="800" 
                        />
                    </Row>
                ))}
            </div>
        </div>
    )
}

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

Display image dynamically on hover on title with Nextjs and GSAP

javascript

reactjs

gsap

next.js

use-ref