如何让Headless UI下拉菜单实现鼠标悬停触发而非点击触发？

要将Headless UI的Menu组件从点击触发改为悬停触发，需要手动管理菜单的显示状态，结合鼠标事件控制展开/收起，具体调整如下：

核心修改步骤 #

• 引入useState钩子管理菜单显示状态
• 给菜单容器和下拉面板添加鼠标进入/离开事件
• 让Transition组件依赖自定义状态控制显示
• 保留按钮的点击切换功能（兼容键盘和移动端）

修改后的完整代码 #

import { useState, Fragment } from 'react';
import { Menu, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/solid';
import { Link } from 'react-router-dom';
import classNames from 'classnames';

export default function HoverDropdown() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Menu as="div" className="relative inline-block text-left"
      onMouseEnter={() => setIsOpen(true)}
      onMouseLeave={() => setIsOpen(false)}
    >
      <div>
        <Menu.Button 
          className="inline-flex w-full justify-center rounded-md bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-offset-gray-100"
          onClick={() => setIsOpen(!isOpen)}
        >
          Features
          <ChevronDownIcon
            className="-mr-1 ml-2 h-5 w-5"
            aria-hidden="true"
          />
        </Menu.Button>
      </div>

      <Transition
        as={Fragment}
        show={isOpen}
        enter="transition ease-out duration-100"
        enterFrom="transform opacity-0 scale-95"
        enterTo="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
        <Menu.Items 
          className="absolute left-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
          onMouseEnter={() => setIsOpen(true)}
        >
          <div className="py-1">
            <Menu.Item>
              {({ active }) => (
                <Link
                  to="#"
                  className={classNames(
                    active ? "bg-primary-light-bk text-gray-900" : "text-gray-500",
                    "block px-4 py-2 text-sm"
                  )}
                >
                  Feature 1
                </Link>
              )}
            </Menu.Item>
            <Menu.Item>
              {({ active }) => (
                <Link
                  to="#"
                  className={classNames(
                    active ? "bg-primary-light-bk text-gray-900" : "text-gray-500",
                    "block px-4 py-2 text-sm"
                  )}
                >
                  Feature 2
                </Link>
              )}
            </Menu.Item>
          </div>
        </Menu.Items>
      </Transition>
    </Menu>
  );
}

关键修改说明 #

1. 状态管理：新增isOpen状态变量，替代Headless UI Menu组件的内置状态，完全由自定义逻辑控制菜单显示
2. 鼠标事件绑定：
   • 最外层Menu容器添加onMouseEnter和onMouseLeave，实现鼠标悬停按钮区域展开、离开关闭的基础逻辑
   • Menu.Items添加onMouseEnter，解决鼠标从按钮移到菜单面板时，因触发容器onMouseLeave导致菜单意外关闭的问题
3. 过渡控制：给Transition组件添加show={isOpen}，让过渡动画跟随自定义状态触发
4. 兼容优化：保留Menu.Button的onClick事件，支持点击切换菜单状态，兼顾键盘操作和移动端触摸场景
5. 样式修正：原代码中ChevronDownIcon的ml-是无效类，改为ml-2保证图标间距合理

内容的提问来源于stack exchange，提问作者SnNaCk