React实现鼠标悬停时修改下一个列表元素的上边框样式

方案一：纯CSS实现（推荐） #

利用CSS相邻兄弟选择器+，无需修改React组件逻辑就能直接实现需求：

修改你的CSS代码：

ul li {
  margin: 10px;
  background: yellowgreen;
  border-top: 5px solid red;
  height: 50px;
}

/* 悬停当前项时，移除下一项的上边框 */
ul li:hover + li {
  border-top-color: transparent;
}

/* 可选：保留悬停当前项时移除自身上边框的效果 */
ul li:hover {
  border-top-color: transparent;
}

这种方案最简洁，完全靠CSS原生选择器实现交互，无需额外React代码。

方案二：React状态管理实现 #

如果需要更灵活的逻辑控制，可以通过React状态跟踪悬停项，动态修改下一项样式：

修改你的React组件代码：

import { useState } from 'react';

const numbers = [1, 2, 3, 4, 5];

export default function App() {
  const [hoveredIndex, setHoveredIndex] = useState(null);

  return (
    <ul>
      {numbers.map((number, index) => (
        <li
          key={number.toString()}
          onMouseEnter={() => setHoveredIndex(index)}
          onMouseLeave={() => setHoveredIndex(null)}
          className={hoveredIndex === index - 1 ? 'no-top-border' : ''}
          style={{
            margin: '10px',
            background: 'yellowgreen',
            borderTop: '5px solid red',
            height: '50px'
          }}
        >
          {number}
        </li>
      ))}
    </ul>
  );
}

搭配对应的CSS类：

ul li.no-top-border {
  border-top-color: transparent;
}

逻辑说明： #

• 用useState维护hoveredIndex状态，记录当前鼠标悬停的列表项索引
• 给每个li绑定onMouseEnter/onMouseLeave事件，更新悬停状态
• 渲染时判断当前项是否是悬停项的下一个（即index === hoveredIndex + 1），如果是则添加no-top-border类移除上边框

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