React/Tailwind项目中map生成卡片hover样式批量异常问题求助

安全阿岳

2026-8-8

解决React+Tailwind卡片hover样式扩散问题

你遇到的问题大概率是两种情况：要么是直接操作DOM的方式出现了意外，要么是你的custom-box-shadow CSS规则写得有问题（比如误用了兄弟选择器，导致当前元素后的所有卡片都被选中）。更符合React+Tailwind最佳实践的是下面两种方案：

方案一：用Tailwind hover伪类（零JS，最推荐）

Tailwind支持直接给自定义类加hover:前缀，只要你把自定义样式放到@layer指令里：

在全局CSS文件（比如globals.css）里定义自定义阴影：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .custom-box-shadow {
    /* 替换成你的自定义阴影值 */
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
  }
}

直接在卡片的className里添加hover:custom-box-shadow，不用写任何鼠标事件：

{data.map((project, index) => {
  return (
    <div
      key={index}
      className='rounded-lg bg-white p-6 shadow-xl transition-all duration-150 hover:custom-box-shadow'>
      [...]
    </div>
  );
})}

方案二：用React状态管理（适合复杂交互场景）

如果hover时需要额外逻辑，用状态记录当前hover的卡片索引，通过状态控制类名：

import { useState } from 'react';

// 组件内部
const [hoveredIdx, setHoveredIdx] = useState(-1);

{data.map((project, index) => {
  return (
    <div
      key={index}
      onMouseEnter={() => setHoveredIdx(index)}
      onMouseLeave={() => setHoveredIdx(-1)}
      className={`rounded-lg bg-white p-6 shadow-xl transition-all duration-150 ${hoveredIdx === index ? 'custom-box-shadow' : ''}`}>
      [...]
    </div>
  );
})}