为什么出现子菜单时悬停消失？

Question

我的网站上有一行，当您将鼠标悬停在其上时，悬停会打开并出现一个附加按钮（用于展开子菜单）。这里一切正常

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

但是，正如您所注意到的，当您单击“子菜单”按钮并且出现子菜单时，悬停会消失。我希望当我单击此按钮并出现子菜单时，悬停保持活动状态。

告诉我该怎么做

  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>
  );
}

子菜单.tsx

  export const SubMenu = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
      <DropdownMenu.Trigger>
        <AppsIcon className="sss" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content>
          <button>Edit s</button>
          <button>Make default</button>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};

样式.css

.sss {
  visibility: hidden;
}

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

tr:hover {
  background: gray;
  visibility: visible;
}

Answer 1

我将其添加到您的 CSS 代码中

body {
  pointer-events: auto !important;
}

它对我有用