如何在鼠标悬停项目名称时修改对应图片的z-index以显示正确图片

我来帮你搞定这个需求～要实现鼠标悬停项目名称时让对应图片显示在最上层，咱们需要通过状态管理关联项目名称和图片组件，再动态修改图片的z-index，具体步骤如下：

1. 在主组件中添加状态管理 #

首先在你的主工作页面组件里，添加一个状态来记录当前被悬停的项目ID，这样就能把悬停事件和对应图片关联起来：

import { useState } from 'react'; // 别忘了导入useState

// 主工作页面代码修改后：
const MainWorkPage = () => {
  const [hoveredProjectId, setHoveredProjectId] = useState(null); // 新增状态

  return (
    <main className='w-full h-full text-gray-50 text-lg py-32'>
      <div className='container flex content-center w-full h-full '>
        <header className='px-12 flex flex-col justify-center'>
          <h1 className='bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-yellow-600 text-8xl font-bold'> Recent Work </h1>
          <ul className='mt-12 flex flex-col gap-4'>
            {projectsData.map((project) => (
              // 传递状态更新函数给WorkInfo
              <WorkInfo key={project.id} project={project} onHover={() => setHoveredProjectId(project.id)} onLeave={() => setHoveredProjectId(null)} />
            ))}
          </ul>
        </header>
        <section className='px-12 flex-grow'>
          <div className='max-w-xs w-full h-full'>
            <ul className='relative w-full h-full'>
              {projectsData.map((project, index) => (
                // 传递当前悬停的项目ID给WorkImage
                <WorkImage key={project.id} project={project} index={index} hoveredProjectId={hoveredProjectId} />
              ))}
            </ul>
          </div>
        </section>
      </div>
    </main>
  );
};

2. 修改WorkInfo组件，添加悬停事件 #

在项目名称组件里，监听鼠标进入和离开事件，触发父组件的状态更新：

const WorkInfo = ({ project, onHover, onLeave }) => {
  return (
    <li key={project.id} className='max-w-xs group' onMouseEnter={onHover} onMouseLeave={onLeave}>
      <a href={project.url} target='_blank' rel='noopener noreferrer' className='flex gap-1 items-center'>
        <div className='h-px w-0 group-hover:w-full bg-gray-50 transition-all duration-700'></div>
        <h3 className='whitespace-pre'>{project.title}</h3>
      </a>
    </li>
  );
};

3. 修改WorkImage组件，动态设置z-index #

根据父组件传递的hoveredProjectId，判断当前图片是否需要提升层级：

const WorkImage = ({ index, project, hoveredProjectId }) => {
  // 当项目ID匹配时，设置更高的z-index，否则用默认层级（index+10避免全叠在一起）
  const zIndex = project.id === hoveredProjectId ? 50 : index + 10;

  return (
    <li className={`absolute w-full h-full`} style={{ zIndex }}>
      <Image src={project.image} alt={project.title} layout='fill' blurDataURL placeholder='blur' className='w-full h-full object-cover' />
    </li>
  );
};

效果说明 #

• 默认状态下，所有图片会按照index+10的z-index排列，后面的图片会在前面的上方（你也可以根据需求调整默认层级）。
• 当鼠标悬停某个项目名称时，对应图片的z-index会变成50，直接跳到最上层显示。
• 鼠标离开后，hoveredProjectId变回null，图片回到原来的层级。

这样就完美实现你想要的交互效果啦～

内容的提问来源于stack exchange，提问作者Harel