如何在子菜单打开时保持悬停启用

Question

我的网站上有一个简单的表格，列出了设备及其特性（在下面链接的示例中将有该表格的缩短版本）。

import "./styles.css";
import { SubMenu } from "./SubMenu";

const subMenuSlice = <SubMenu />;

const nodes = [
  {
    id: "0",
    name: "Samsung Galaxy",
    subMenu: subMenuSlice
  },
  {
    id: "0",
    name: "Iphone",
    subMenu: subMenuSlice
  }
];

export default function App() {
  return (
    <table>
      <tbody>
        {nodes.map((val, key) => (
          <tr key={key}>
            <td>{val.name}</td>
            <td>{val.subMenu}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

https://codesandbox.io/s/romantic-rgb-5t7xkq

如您所见，当您将鼠标悬停在任何一行上时，整行都会变成灰色，并会出现一个附加按钮。通过单击此按钮，用户可以获得一个子菜单。

问题描述：问题是当用户将光标移动到子菜单时，悬停（灰色）从表格行消失。请告诉我如何在子菜单处于活动状态（打开）时保持悬停启用状态

Answer 1

我会跟踪某些状态，例如正在“悬停”的项目的当前

id

。然后为该项目添加一个额外的类并根据该类设置其样式，在您的示例中：

App.tsx

import "./styles.css";
import { SubMenu } from "./SubMenu";
import { useState } from "react";

const subMenuSlice = <SubMenu />;

const nodes = [
  {
    id: "0",
    name: "Samsung Galaxy",
    subMenu: subMenuSlice
  },
  {
    id: "1",
    name: "Iphone",
    subMenu: subMenuSlice
  }
];

export default function App() {
  const [isHovered, setIsHovered] = useState(null);

  const handleMouseEnter = (id) => {
    setIsHovered(id);
  };

  const handleMouseLeave = () => {
    setIsHovered(null);
  };

  return (
    <table>
      <tbody>
        {nodes.map((val, key) => (
          <tr
            key={key}
            onMouseEnter={() => handleMouseEnter(val.id)}
            onMouseLeave={handleMouseLeave}
            className={val.id === isHovered ? "hovered" : ""} // here you set the class if the id matches. 
          >
            <td>{val.name}</td>
            <td>{val.subMenu}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

样式.css

.sss {
  visibility: hidden;
}

tr.hovered .sss {
  background: gray;
  visibility: visible;
}

tr.hovered {
  background: gray;
  visibility: visible;
  pointer-events: initial !important;
}

.style-button:hover {
  background-color: aqua;
}

您必须确保在此示例中所有 id 都是唯一的。如果情况并非如此，请使用另一个唯一值。