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

Posted 2023-02-25

【中文标题】使用 Nextjs 和 GSAP 悬停在标题上动态显示图像

【英文标题】：Display image dynamically on hover on title with Nextjs and GSAP

【发布时间】：2021-09-01 18:57:00

【问题描述】：

我有一个动态呈现的标题列表，当我将鼠标悬停在每个标题上时，我想显示一个图像。 当我悬停标题时，所有图像都会显示。 我仍然是 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)
                   />
              </Row>
            ))
      </div>
    </div>
  )


export default Articles

【参考方案1】：

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

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) 
                             
                        />
                    </Row>
                ))
            </div>
        </div>
    )