如何在下拉菜单展开时保持表格行 hover 状态-js教程-PHP中文网

如何在下拉菜单展开时保持表格行 hover 状态

通过状态管理将 hover 效果升级为“激活态”，结合 onOpenChange 回调同步子菜单打开/关闭状态，使表格行在鼠标移入菜单区域时仍保持高亮与交互样式。

通过状态管理将 hover 效果升级为“激活态”，结合 `onopenchange` 回调同步子菜单打开/关闭状态，使表格行在鼠标移入菜单区域时仍保持高亮与交互样式。

在使用 Radix UI 的 DropdownMenu 构建表格内嵌操作菜单时，一个常见痛点是：当用户从表格行（

）悬停后点击触发下拉菜单，随后将鼠标移至菜单项上时，由于的 :hover 伪类立即失效（鼠标已离开边界），导致背景色消失、图标隐藏——视觉中断且体验割裂。

根本原因在于 CSS :hover 是基于元素边界瞬时检测的，无法跨越 DOM 层级感知子菜单区域。因此，必须脱离纯 CSS 方案，改用受控状态 + 类名驱动样式的方式实现“hover 延续”。

✅ 推荐方案：状态提升 + 双重激活逻辑

我们将表格行的高亮状态从 :hover 升级为受控的 active 状态，并同时支持两种激活来源：

鼠标悬停（保留原有交互直觉）
下拉菜单处于打开状态（保证菜单期间持续高亮）

步骤一：改造父组件（App.tsx）——状态管理与透传

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 id="{node.id}" onopenchange="{(open)">
                  open ? setIsActive(node.id) : setIsActive(null)
                }
              />
            </submenu>
</td>
          </tr>
        ))}
      </tbody></table>
  );
}</string>

✅ 关键点：

AI图像编辑器
一款AI图像与设计工具，主要用于使用文本提示编辑、变换和增强照片，适合需要提升相关任务效率的用户。

下载

使用唯一 id（非索引）作为状态标识，避免重复 ID 导致状态错乱；

onOpenChange 回调由子组件触发，精准同步开关状态；

移除 onMouseEnter/onMouseLeave，交由菜单自身控制激活生命周期。

步骤二：增强子组件（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";

interface SubMenuProps {
  id: string;
  onOpenChange?: (open: boolean) => void;
}

export const SubMenu = ({ id, onOpenChange }: SubMenuProps) => {
  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}" onmouseleave onclick="{(e)"> e.stopPropagation()}
        >
          <button classname="style-button">Edit</button>
          <button classname="style-button">Make</button>
          <button classname="style-button">Delete</button>
        </dropdownmenu.content></dropdownmenu.portal></dropdownmenu.root>
  );
};

⚠️ 注意事项：

asChild 确保完全接管触发器行为；

onClick 在 Content 上调用 stopPropagation()，防止点击菜单项时意外冒泡触发父级 tr 的 mouseleave（即使未显式绑定，某些浏览器行为可能干扰）；

不再手动调用 setIsActive，而是依赖 onOpenChange 统一响应。

步骤三：更新样式（styles.css）——合并 hover 与 active 规则

.sss {
  visibility: hidden;
  transition: visibility 0.15s ease; /* 平滑显示 */
}

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

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

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

.style-button:hover {
  background-color: #e0f7fa;
}

? 进阶提示：

添加 transition 让图标显隐更自然；

使用语义化类名（如 .active）而非 .hovered，更准确表达“当前被操作中”的业务含义；

若需支持键盘导航（如 Tab 进入菜单），可扩展 isActive 为 focusWithin 或监听 onFocusOutside，本文聚焦鼠标场景。