React+Tailwind实现鼠标悬停时背景局部圆形消失跟随效果

这个效果的核心是利用CSS的mask属性，通过径向渐变创建一个跟随鼠标位置的圆形透明区域，让上层div（div2）的背景在该区域"消失"，从而露出下层div（div1）的背景。结合React的鼠标事件监听，动态更新透明区域的位置即可。

具体实现步骤 #

• 调整定位结构：给div1添加relative类，div2添加absolute inset-0类，确保div2完全覆盖在div1上方。
• 维护状态跟踪：在React组件中跟踪鼠标在div1内的坐标（x, y）以及是否处于悬停状态（isHovered）。
• 绑定鼠标事件：给div1绑定onMouseEnter、onMouseLeave切换悬停状态，绑定onMouseMove实时更新鼠标坐标。
• 动态生成mask样式：悬停时给div2设置mask-image为径向渐变，圆心定位在鼠标坐标处，圆形区域设为透明，其余区域不透明；未悬停时mask设为全不透明，保持div2完全覆盖div1。

完整React组件代码 #

import { useState } from 'react';

export default function HoverReveal() {
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseMove = (e) => {
    const { left, top } = e.currentTarget.getBoundingClientRect();
    // 计算鼠标相对于div1内部的坐标
    setMousePos({
      x: e.clientX - left,
      y: e.clientY - top,
    });
  };

  // 动态生成mask样式，兼容webkit内核浏览器
  const maskStyle = isHovered ? {
    maskImage: `radial-gradient(circle at ${mousePos.x}px ${mousePos.y}px, transparent 40px, black 40px)`,
    WebkitMaskImage: `radial-gradient(circle at ${mousePos.x}px ${mousePos.y}px, transparent 40px, black 40px)`
  } : {};

  return (
    <div
      className='bg-img1 h-32 w-32 bg-no-repeat bg-cover bg-center relative'
      id='div1'
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onMouseMove={handleMouseMove}
    >
      <div
        className='bg-img2 h-32 w-32 bg-no-repeat bg-cover bg-center absolute inset-0'
        id='div2'
        style={maskStyle}
      ></div>
    </div>
  );
}

补充说明 #

• 代码中的40px是圆形透明区域的半径，可根据需求调整大小。
• 确保已在Tailwind配置中正确引入自定义背景类，示例配置如下：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'img1': "url('/path-to-your-image1.jpg')",
        'img2': "url('/path-to-your-image2.jpg')",
      },
    },
  },
}

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