时间戳

首页 > 解决方案 > React js悬停元素并在离开元素时禁用悬停

reactjs - React js悬停元素并在离开元素时禁用悬停

问题描述

我在 react js 中有一个应用程序，有一个元素列表，当用户将鼠标悬停在元素上时，背景颜色应更改为red. 目前它有效。我也想当我离开元素unhover时，元素应该没有red背景，但现在当我离开元素时，颜色不会消失。基本上，悬停应该只影响用户所在的那个元素hover。

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

const Element = ({ id }) => {
  const styles = {
    background: "red"
  };
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className={isHovered ? "hovered" : ""}
      onMouseOver={() => {
        setIsHovered(true);
      }}
    >
      hello {id}
    </div>
  );
};

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

演示：https
://codesandbox.io/s/compassionate-einstein-9v1ws?file=/src/App.js:0-557问题：谁能帮助解决这个问题？

标签： reactjs

解决方案

代替onMouseOver，您可以使用onMouseEnter和onMouseLeave应用基于isHovered状态的样式。

这是您更新的代码。

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

const Element = ({ id }) => {
  // const styles = {
  //   background: "red"
  // };
  const [isHovered, setIsHovered] = useState(false);
  console.log({ isHovered });
  return (
    <div
      // style={{ backgroundColor: isHovered ? "red" : "transparent" }}
      className={"hovered"}
      // onMouseEnter={() => 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>
  );
}

className您也可以使用不使用变量来执行相同的操作state，只针对悬停类。我已经在沙箱中使用了两者。

如果只做 with className，你可以添加一个 className 到 div

className={"hovered"}

然后，更新css文件中类的样式。

.hovered:hover {
    background: red;
 }

更新的沙盒

推荐阅读