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

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

本文讲解如何通过状态管理（而非纯 css hover）解决 radix ui 下拉菜单展开后表格行 hover 效果丢失的问题，确保用户从触发按钮移入子菜单时，父行背景与图标仍保持高亮状态。

本文讲解如何通过状态管理（而非纯 css hover）解决 radix ui 下拉菜单展开后表格行 hover 效果丢失的问题，确保用户从触发按钮移入子菜单时，父行背景与图标仍保持高亮状态。

在使用 @radix-ui/react-dropdown-menu 构建表格内嵌操作菜单时，一个常见痛点是：当鼠标从触发图标（如）移向弹出的时，由于子菜单 DOM 节点通常脱离原的布局流（通过 Portal 渲染到 body 底部），导致的 :hover 伪类立即失效——灰底消失、图标隐藏，体验割裂。

根本原因在于 CSS :hover 仅作用于连续的鼠标进入/停留路径，而 Portal 渲染的菜单与原

无 DOM 包含关系，鼠标经过两者之间的空白区域即触发 mouseleave，无法自然“延续”悬停态。

✅ 正确解法是将悬停/激活状态提升至组件层级统一管理，用 React 状态替代 CSS 伪类：

✅ 方案一：仅保持 hover 状态（推荐用于简单交互）

在中维护 isHovered: string | null，通过 onMouseEnter/onMouseLeave 显式控制，并为匹配的

添加 hovered 类：

// App.tsx
export default function App() {
  const [isHovered, setIsHovered] = useState<string null>(null);

  return (
    <table><tbody>
        {nodes.map((val) => (
          <tr key="{val.id}" onmouseenter="{()"> setIsHovered(val.id)}
            onMouseLeave={() => setIsHovered(null)}
            className={isHovered === val.id ? "hovered" : ""}
          >
            <td>{val.name}</td>
            <td><submenu></submenu></td>
          </tr>
        ))}
      </tbody></table>
  );
}</string>

对应 CSS：

/* styles.css */
.sss { visibility: hidden; }
tr.hovered .sss,
tr:hover .sss {
  visibility: visible;
  background: gray;
}
tr.hovered,
tr:hover {
  background: gray;
  pointer-events: initial !important;
}

⚠️ 注意：nodes 中每个 id 必须唯一（原示例中两个 "0" 会导致状态冲突），建议使用 uuid 或索引生成唯一标识。

MusicAI
一款AI音频处理工具，主要用于AI音乐生成工具，适合需要提升相关任务效率的用户。

下载

✅ 方案二：扩展为「hover + active」双态（推荐生产环境）

当用户点击图标展开菜单后，即使鼠标短暂离开再移回，也应维持高亮——此时需将菜单的 open 状态同步回父组件：

改造 SubMenu 接收回调函数：

// SubMenu.tsx
export const SubMenu = ({ 
openCallback 
}: { 
openCallback?: (isOpen: boolean) => void 
}) => {
const [isOpen, setIsOpen] = useState(false);

const handleOpenChange = (open: boolean) => { setIsOpen(open); openCallback?.(open); // 向父组件同步开关状态 };

return (

); }; ```

父组件同时响应 hover 与 active 状态：

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

return (

{nodes.map((val) => ( setIsActive(val.id)} onMouseLeave={() => isActive !== val.id && setIsActive(null)} className={isActive === val.id ? "active" : ""} > ))}

{val.name}

open ? setIsActive(val.id) : setIsActive(null) } />

); } ```

CSS 同步支持两种状态：

tr.active .sss,
tr:hover .sss {
  visibility: visible;
  background: gray;
}
tr.active,
tr:hover {
  background: gray;
  pointer-events: initial !important;
}