如何在下拉菜单展开时保持表格行 hover 样式持续生效-js教程-PHP中文网

如何在下拉菜单展开时保持表格行 hover 样式持续生效

本文介绍如何解决 Radix UI DropdownMenu 在表格中展开时因鼠标移出触发 mouseleave 导致 hover 样式丢失的问题，通过状态提升 + 条件类名 + 事件委托实现“hover 持续”与“菜单激活态”双重保留。

本文介绍如何解决 radix ui dropdownmenu 在表格中展开时因鼠标移出触发 `mouseleave` 导致 hover 样式丢失的问题，通过状态提升 + 条件类名 + 事件委托实现“hover 持续”与“菜单激活态”双重保留。

在使用构建表格操作列时，一个常见痛点是：当用户将鼠标从表格行（

）移向弹出的下拉菜单时，tr:hover 触发器失效，导致背景色消失、图标隐藏——视觉上出现“闪断”，体验割裂。根本原因在于默认渲染在下（通过 Portal），脱离了的 DOM 包围结构，因此 :hover 伪类无法自然延续。

✅ 推荐方案：状态驱动 + 双态样式（Hover + Active）

我们不依赖纯 CSS 的 :hover，而是将“高亮态”交由 React 状态控制，并同时支持两种触发场景：

悬停态（Hover）：鼠标停留在行内时激活
激活态（Active）：下拉菜单处于打开状态时持续保持高亮

这样无论鼠标在行内还是菜单内移动，只要菜单开着，行样式就始终有效。

步骤一：改造父组件（App.tsx），管理全局激活 ID

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

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

export default function App() {
  const [isActive, setIsActive] = useState<string null>(null);

  return (
    <table><tbody>
        {nodes.map((node) => (
          <tr key="{node.id}" classname="{isActive" node.id :>
<td>{node.name}</td>
            <td>
              <submenu onopenchange="{(open)"> 
                  open ? setIsActive(node.id) : setIsActive(null)
                }
              />
            </submenu>
</td>
          </tr>
        ))}
      </tbody></table>
  );
}</string>

? 关键点：

LongShot
一款面向长篇内容创作和SEO写作的AI写作工具，可辅助进行文章生成、内容优化和搜索引擎友好的文本制作。

下载

使用唯一 id（避免重复 id: "0"）作为状态标识；

将 onOpenChange 回调透传至 SubMenu，使其能通知父组件当前打开/关闭状态。

步骤二：增强 SubMenu 组件（SubMenu.tsx）

import { useState } from "react";
import AppsIcon from "@mui/icons-material/Apps";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import "./styles.css";

export const SubMenu = ({ 
  onOpenChange 
}: { 
  onOpenChange?: (open: boolean) => void 
}) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <dropdownmenu.root open="{isOpen}" onopenchange="{(open)"> {
        setIsOpen(open);
        onOpenChange?.(open);
      }}
    >
      <dropdownmenu.trigger aschild><appsicon classname="sss"></appsicon></dropdownmenu.trigger><dropdownmenu.portal><dropdownmenu.content side="bottom" sideoffset="{-30}" align="start" alignoffset="{80}" onmouseenter onmouseleave> setIsOpen(true)}
          onMouseLeave={() => setTimeout(() => setIsOpen(false), 100)}
        >
          <button classname="style-button">Edit</button>
          <button classname="style-button">Make</button>
          <button classname="style-button">Delete</button>
        </dropdownmenu.content></dropdownmenu.portal></dropdownmenu.root>
  );
};

⚠️ 注意事项：

onMouseEnter/Leave 为菜单区域添加微延迟关闭逻辑，提升操作容错性；

使用 asChild 让 AppsIcon 直接作为触发器，确保事件绑定准确；

onOpenChange 回调需在状态变更后立即执行，保证父子同步。

步骤三：更新 CSS，合并 hover 与 active 样式

.sss {
  visibility: hidden;
  transition: visibility 0.15s ease;
}

/* 同时响应 hover 和 active */
tr:hover .sss,
tr.active .sss {
  visibility: visible;
  background: #e0e0e0;
}

tr:hover,
tr.active {
  background-color: #f5f5f5 !important;
  pointer-events: auto !important;
}

.style-button {
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

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