Next.js中文字遮挡网格列Hover交互失效问题求助

我在Next.js中开发了一个包含6列网格的页面，网格上方叠加了文本元素。需求是鼠标Hover文本对应区域时，下方对应的网格列切换为图片背景，当前功能基本正常，但文本遮挡区域无法触发网格列的Hover事件，求解决方案。

const [dissapear, setDissapear] = useState([20]);
  return (
    <PageLayout
      className="bg-softBlack"
    >
      <div className="relative h-[480px]">
        <h1
          className="absolute top-32 uppercase bg-transparent text-gray-10 text-[9.028vw] leading-[0.9] tracking-[-0.06em]"
          style={{ zIndex: 1000, mixBlendMode: "difference" }}
        >
          welcome <br />
          to the LAB.
        </h1>
        <div className="w-full h-full absolute left-0 top-0 grid grid-cols-6">
          {array.map((e, idx) => (
            <div
              key={idx}
              className="bg-black relative"
              onMouseEnter={() => setDissapear((prev) => [...prev, idx])}
            >
              {dissapear.some((e) => e === idx) && (
                <Image src={e} alt="background" layout="fill" />
              )}
            </div>
          ))}
        </div>
      </div>
    </PageLayout>

解决方案 #

方法1：给文本元素添加pointer-events: none #

文本元素默认会拦截鼠标事件，添加这个CSS属性后，鼠标事件会穿透文本直接作用于下方的网格元素，这是最简单直接的解决方案，适合不需要文本本身响应鼠标交互的场景。

修改<h1>的样式：

<h1
  className="absolute top-32 uppercase bg-transparent text-gray-10 text-[9.028vw] leading-[0.9] tracking-[-0.06em]"
  style={{ zIndex: 1000, mixBlendMode: "difference", pointerEvents: "none" }}
>
  welcome <br />
  to the LAB.
</h1>

方法2：监听文本鼠标事件同步更新网格状态 #

如果需要保留文本的鼠标交互（比如选中复制），可以给文本元素添加onMouseEnter和onMouseLeave事件，通过计算鼠标位置匹配对应的网格列，手动更新状态。不过这种方法需要额外的位置计算逻辑，相对复杂。

方法3：补充网格的Hover触发范围 #

可以给网格列元素添加透明的伪元素或额外的覆盖层，确保覆盖文本所在的区域，同时保持原有视觉效果，不过这种方法不如第一种简洁。

修改后的完整代码示例 #

import { useState } from 'react';
import Image from 'next/image';
import PageLayout from './PageLayout';

export default function LabPage() {
  const [dissapear, setDissapear] = useState([20]);
  const array = ['/image1.jpg', '/image2.jpg', '/image3.jpg', '/image4.jpg', '/image5.jpg', '/image6.jpg'];

  return (
    <PageLayout className="bg-softBlack">
      <div className="relative h-[480px]">
        <h1
          className="absolute top-32 uppercase bg-transparent text-gray-10 text-[9.028vw] leading-[0.9] tracking-[-0.06em]"
          style={{ zIndex: 1000, mixBlendMode: "difference", pointerEvents: "none" }}
        >
          welcome <br />
          to the LAB.
        </h1>
        <div className="w-full h-full absolute left-0 top-0 grid grid-cols-6">
          {array.map((e, idx) => (
            <div
              key={idx}
              className="bg-black relative"
              onMouseEnter={() => setDissapear((prev) => [...prev, idx])}
              // 可选：添加离开事件恢复黑色背景
              onMouseLeave={() => setDissapear((prev) => prev.filter(item => item !== idx))}
            >
              {dissapear.some((item) => item === idx) && (
                <Image src={e} alt="background" layout="fill" objectFit="cover" />
              )}
            </div>
          ))}
        </div>
      </div>
    </PageLayout>
  );
}

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