React+Tailwind问题：独立hover状态下单卡片hover触发双卡片展开

问题原因 #

你的代码逻辑本身没问题，但依赖React状态管理hover效果可能因布局间隙、渲染机制等出现误触发，改用CSS原生伪类实现更可靠，还能简化代码。

优化后的代码 #

import React from "react";
import card1 from "../assets/Logos/card1.gif";
import card2 from "../assets/Logos/card2.gif";

const Demo = () => {
  return (
    <div className="bg-black grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-36 py-14 px-24">
      {/* Card 1 */}
      <div className="bg-black px-6 py-10 rounded-3xl flex flex-col justify-center transition-all duration-500 ease-in-out group">
        <img className="w-16" src={card1} alt="" />
        <h1 className="text-[#7670EA] font-Poppins-Medium text-xl">
          Creativity With Purpose:
        </h1>
        <div className="overflow-hidden transition-all duration-500 ease-in-out max-h-0 group-hover:max-h-40">
          <p className="text-white pt-4">
            We bring ideas to life, crafting innovative and meaningful
            narratives that resonate with your audience.
          </p>
        </div>
      </div>

      {/* Card 2 */}
      <div className="bg-black px-6 py-10 rounded-3xl flex flex-col justify-center transition-all duration-500 ease-in-out group">
        <img className="w-16" src={card2} alt="" />
        <h1 className="text-[#F43C3C] font-Poppins-Medium text-xl">
          Client-Service Focused:
        </h1>
        <div className="overflow-hidden transition-all duration-500 ease-in-out max-h-0 group-hover:max-h-40">
          <p className="text-white pt-4">
            Your vision is our mission. We partner with you to create strategies
            that elevate your brand.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Demo;

关键修改点 #

• 移除React useState状态管理，改用Tailwind的group类与group-hover:伪类组合实现局部hover效果
• 卡片容器添加group标记，内部展开区域通过group-hover:max-h-40实现悬停展开，确保仅当前卡片触发变化
• 保留原有过渡动画，保证交互流畅性

原代码问题排查（可选） #

若坚持使用React状态，可检查以下几点：

• 缩小gap-36测试，避免过大间距导致hover范围误触发
• 排查全局CSS是否干扰卡片hover事件
• 在事件处理函数中添加e.stopPropagation()，避免事件冒泡影响

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