Tailwind CSS：React社交图标单个Hover效果异常修复求助

DevOps 小满

2026-8-9

解决方案

问题出在布局结构和样式作用逻辑上，调整后的代码如下：

import { FaLinkedin, FaGithub } from "react-icons/fa";

const SocialLinks = () => {
  return (
    <div className="fixed top-1/2 right-0 mt-48">
      <ul className="flex flex-col gap-2">
        <li className="hover:mr-4 transition-all duration-300">
          <a
            className="flex items-center justify-center h-10 w-10 rounded-full bg-blue-800 text-white"
            href="https://www.linkedin.com/in"
            target="_blank"
            rel="noopener noreferrer"
          >
            <FaLinkedin size={16} />
          </a>
        </li>
        <li className="hover:mr-4 transition-all duration-300">
          <a
            className="flex items-center justify-center h-10 w-10 rounded-full bg-gray-300 text-gray-800"
            href="https://github.com"
            target="_blank"
            rel="noopener noreferrer"
          >
            <FaGithub size={16} />
          </a>
        </li>
      </ul>
    </div>
  );
};

export default SocialLinks;

关键调整说明：

给<ul>添加flex flex-col gap-2：让列表项垂直独立排列，用gap统一控制项间距，替代原有的mr-2，避免margin相互干扰。
移除<li>默认的mr-2：只保留hover:mr-4，确保只有被hover的列表项才会触发右侧间距变化。
添加transition-all duration-300：让hover效果平滑过渡，避免生硬的位置跳转。
修正top-50%为top-1/2：Tailwind没有top-50%类，top-1/2是官方标准写法，实现垂直居中定位。