React组件悬停样式控制：实现单图标背景切换效果

核心实现思路 #

用useState记录当前悬停的技能图标名称，通过对比状态值给对应图标添加激活类来切换背景色；同时监听鼠标离开事件，清空状态恢复默认样式。

修改后的代码 #

SkillsCard.tsx

import React, { useState } from "react";
import "./SkillsCardStyle.css";

type SkillsCardProps = {
  skills: {
    name: string;
    header: string;
    text: string;
    url: string;
  }[];
  setSelectedSkill: React.Dispatch<React.SetStateAction<any>>;
};

const SkillsCard: React.FC<SkillsCardProps> = ({
  skills,
  setSelectedSkill,
}) => {
  const [hoveredSkill, setHoveredSkill] = useState<string>("");

  const handleMouseEnter = (skill: typeof skills[0]) => {
    setSelectedSkill(skill);
    setHoveredSkill(skill.name);
  };

  const handleMouseLeave = () => {
    setHoveredSkill("");
  };

  return (
    <div className="grid">
      {skills.map((skill, index) => (
        <img
          key={index}
          src={skill.url}
          onMouseEnter={() => handleMouseEnter(skill)}
          onMouseLeave={handleMouseLeave}
          className={`${skill.name} ${hoveredSkill === skill.name ? "active" : ""}`}
          alt={skill.name}
        />
      ))}
    </div>
  );
};

export default SkillsCard;

SkillsCardStyle.css

在原有CSS基础上添加激活状态样式：

/* 原有grid及图标基础样式保持不变 */
.grid img.active {
  background: white; /* 悬停时的白色背景 */
}

关键调整说明 #

1. 状态语义优化：把原white状态改名为hoveredSkill，更直观表达状态用途
2. 补充鼠标离开逻辑：鼠标移开图标时清空悬停状态，确保单个图标悬停结束后恢复默认样式
3. 动态绑定类名：通过条件判断给当前悬停的图标追加active类，实现样式切换
4. 样式与逻辑分离：用CSS类替代内联样式，符合前端开发最佳实践

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