React JS元素悬停状态异常求助：鼠标离开后红色背景未消失问题

你遇到的问题很清晰：只给元素绑定了onMouseOver事件来激活悬停状态，但没有处理鼠标离开的逻辑，导致状态一直停留在true，红色背景自然不会消失。好在每个Element组件本身有独立的isHovered状态，只要补全事件处理，就能保证悬停效果只作用于当前被悬停的元素。

具体修复步骤 #

1. 补充鼠标离开事件处理 #

在你的div元素上添加onMouseLeave事件，当鼠标离开时将isHovered设为false，这样就能在鼠标离开时恢复元素的初始状态：

2. 确保样式生效 #

注意到你定义了styles变量但没有实际使用，推荐在styles.css中定义.hovered类的样式（更符合React样式管理的最佳实践），或者直接结合状态使用内联样式。

修改后的完整代码 #

组件代码 #

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

const Element = ({ id }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className={isHovered ? "hovered" : ""}
      onMouseOver={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)} // 新增鼠标离开事件处理
    >
      hello {id}
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      {[0, 1, 2].map((el) => {
        return <Element key={el} id={el} />;
      })}
    </div>
  );
}

styles.css 代码 #

.App {
  font-family: sans-serif;
  padding: 20px;
}

.hovered {
  background-color: red;
  padding: 8px;
  margin: 4px 0;
}

额外说明 #

每个Element组件都拥有独立的isHovered状态，所以当你悬停其中一个元素时，只会修改该组件的状态，不会影响其他元素，这部分逻辑本身是正确的，不需要额外调整。

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