本文介绍如何解决 Radix UI DropdownMenu 在表格中展开时因鼠标移出触发 mouseleave 导致 hover 样式丢失的问题，通过状态提升 + 条件类名 + 事件委托实现“hover 持续”与“菜单激活态”双重保留。
本文介绍如何解决 radix ui dropdownmenu 在表格中展开时因鼠标移出触发 `mouseleave` 导致 hover 样式丢失的问题，通过状态提升 + 条件类名 + 事件委托实现“hover 持续”与“菜单激活态”双重保留。
在使用 <DropdownMenu /> 构建表格操作列时，一个常见痛点是：当用户将鼠标从表格行（<tr>）移向弹出的下拉菜单时，tr:hover 触发器失效，导致背景色消失、图标隐藏——视觉上出现“闪断”，体验割裂。根本原因在于 <DropdownMenu.Content> 默认渲染在 <body> 下（通过 Portal），脱离了 <tr> 的 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 ? "active" : ""}>
<td>{node.name}</td>
<td>
<SubMenu
onOpenChange={(open) =>
open ? setIsActive(node.id) : setIsActive(null)
}
/>
</td>
</tr>
))}
</tbody>
</table>
);
}? 关键点：
- 使用唯一 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" />
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
side="bottom"
sideOffset={-30}
align="start"
alignOffset={80}
// ? 添加 onMouseEnter / onMouseLeave 防止菜单关闭
onMouseEnter={() => 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;
}? 提示：
- pointer-events: auto 替代 initial 更语义化；
- 添加 transition 让图标显隐更平滑；
- .active 类优先级与 :hover 并列，确保逻辑一致。
✅ 最终效果
- 鼠标移入行 → 行变灰、图标显示；
- 点击图标 → 下拉菜单展开，tr.active 生效，样式持续；
- 鼠标移入菜单区域 → 不触发 tr:hover 离开，但 tr.active 仍保持；
- 鼠标移出菜单 → 延迟关闭，避免误触；
- 所有交互均有明确反馈，无样式闪烁。
该方案兼顾可访问性（不依赖纯 CSS）、可维护性（状态集中管理）与用户体验（零感知中断），适用于任意基于 Portal 渲染的浮层组件（如 Popover、Tooltip 等）。
