React列表项Hover效果异常：单个触发却全局响应

我在映射渲染社交链接数组时遇到了问题：鼠标悬停任意一个<li>元素，所有列表项都会同步展开（右侧外边距从-100px变为-10px），但我只想让被悬停的那个元素触发展开效果。

数组定义 #

const socialLinks = [
    {
      id: 1,
      child: (
        <>
          <FaLinkedin className='text-2xl' /> Linkedin
        </>
      ),
      href: 'https://www.linkedin.com/in/',
      style: 'rounded-tl-lg'
    },
    {
      id: 2,
      child: (
        <>
          <FaGithub className='text-2xl' /> Github
        </>
      ),
      href: 'https://github.com/7'
    },
    {
      id: 3,
      child: (
        <>
          <FaMailBulk className='text-2xl' /> Mail
        </>
      ),
      href: 'mailto:'
    },
    {
      id: 4,
      child: (
        <>
          <FaPersonBooth className='text-2xl' /> Resume
        </>
      ),
      href: '',
      style: 'rounded-bl-lg'
    }
  ]

映射渲染代码 #

{socialLinks.map(({ child, href, style = '', download = '', id }) => {
  return (
    <li
      key={id}
      className={
        'flex justify-between items-center h-14 w-40 px-4 bg-stone-700/80 mr-[-100px] hover:mr-[-10px] hover:rounded-lg duration-300' +
        ' ' +
        style
      }
    >
      <Link
        key={id}
        href={href}
        download={download}
        target='_blank'
        rel='noreferrer'
        className='flex justify-between items-center w-full'
      >
        {child}
      </Link>
    </li>
  )
})}

解决方法 #

问题核心是hover样式的触发范围错误，大概率是父容器（比如<ul>）的布局导致鼠标进入父容器就触发了所有子元素的hover状态，或者样式写法引发了意外的继承。

修复步骤：

1. 简化className写法：用模板字符串替代字符串拼接，避免样式冲突，同时确保hover伪类只绑定在当前<li>上：

{socialLinks.map(({ child, href, style = '', download = '', id }) => {
  return (
    <li
      key={id}
      className={`flex justify-between items-center h-14 w-40 px-4 bg-stone-700/80 mr-[-100px] hover:mr-[-10px] hover:rounded-lg duration-300 ${style}`}
    >
      <Link
        href={href}
        download={download}
        target='_blank'
        rel='noreferrer'
        className='flex justify-between items-center w-full'
      >
        {child}
      </Link>
    </li>
  )
})}

2. 检查父容器布局：确认<ul>没有设置过大的宽度或overflow属性，导致鼠标进入父容器就触发所有子元素的hover。给<ul>添加flex flex-col确保列表项垂直独立排列，避免布局重叠。

3. 移除冗余key：<Link>不需要重复设置key，只需要在循环的最外层元素（<li>）上设置即可，避免不必要的渲染问题。

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