如何在Tailwind UI导航组件中实现悬停显示菜单？

要把点击触发的Popover导航改成悬停显示，核心是替换触发逻辑，用鼠标事件结合状态管理控制菜单的显示/隐藏，同时处理菜单的延迟关闭（避免鼠标从按钮移到菜单时菜单意外消失）。以下是具体实现步骤和修改后的代码：

1. 引入必要的Hook #

在组件顶部添加React内置的状态和引用Hook，用来管理菜单状态和延迟定时器：

import { useState, useRef, Fragment } from 'react';
import { Transition } from '@headlessui/react';
import classNames from 'classnames';

2. 修改触发逻辑与菜单控制 #

移除原有的Popover和Popover.Button组件，改用普通容器元素承载悬停事件，结合自定义状态控制菜单显示，同时添加延迟关闭逻辑：

修改后的完整代码片段 #

{navigation.categories.map((category) => {
  const [isOpen, setIsOpen] = useState(false);
  const timeoutRef = useRef(null);

  const handleMouseEnter = () => {
    // 清除之前的延迟关闭定时器
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    setIsOpen(true);
  };

  const handleMouseLeave = () => {
    // 设置300ms延迟关闭，给鼠标移到菜单的缓冲时间
    timeoutRef.current = setTimeout(() => {
      setIsOpen(false);
    }, 300);
  };

  return (
    <div key={category.name} className="flex relative">
      {/* 触发元素：替换原Popover.Button为普通可悬停容器 */}
      <div
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        className={classNames(
          isOpen
            ? 'border-indigo-600 text-indigo-600'
            : 'border-transparent text-gray-700 hover:text-gray-800',
          'relative z-10 flex items-center transition-colors ease-out duration-200 text-sm font-medium border-b-2 -mb-px pt-px cursor-pointer'
        )}
      >
        {category.name}
      </div>

      <Transition
        as={Fragment}
        show={isOpen} // 用自定义状态控制过渡动画
        enter="transition ease-out duration-200"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition ease-in duration-150"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        {/* 菜单面板：添加悬停事件，确保鼠标在菜单内时保持打开 */}
        <div
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          className="absolute top-full inset-x-0 text-sm text-gray-500"
        >
          {/* 原阴影装饰元素保留 */}
          <div className="absolute inset-0 top-1/2 bg-white shadow" aria-hidden="true" />

          <div className="relative bg-white">
            <div className="max-w-7xl mx-auto px-8">
              <div className="grid grid-cols-2 gap-y-10 gap-x-8 py-16">
                <div className="col-start-2 grid grid-cols-2 gap-x-8">
                  {category.featured.map((item) => (
                    <div key={item.name} className="group relative text-base sm:text-sm">
                      <div className="aspect-w-1 aspect-h-1 rounded-lg bg-gray-100 overflow-hidden group-hover:opacity-75">
                        <img
                          src={item.imageSrc}
                          alt={item.imageAlt}
                          className="object-center object-cover"
                        />
                      </div>
                      <a href={item.href} className="mt-6 block font-medium text-gray-900">
                        <span className="absolute z-10 inset-0" aria-hidden="true" />
                        {item.name}
                      </a>
                      <p aria-hidden="true" className="mt-1">
                        Shop now
                      </p>
                    </div>
                  ))}
                </div>
                <div className="row-start-1 grid grid-cols-3 gap-y-10 gap-x-8 text-sm">
                  {category.sections.map((section) => (
                    <div key={section.name}>
                      <p id={`${section.name}-heading`} className="font-medium text-gray-900">
                        {section.name}
                      </p>
                      <ul
                        role="list"
                        aria-labelledby={`${section.name}-heading`}
                        className="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
                      >
                        {section.items.map((item) => (
                          <li key={item.name} className="flex">
                            <a href={item.href} className="hover:text-gray-800">
                              {item.name}
                            </a>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </Transition>
    </div>
  );
})}

关键改动说明 #

• 移除原Popover组件：原Popover是为点击触发设计的，改用普通div容器更灵活适配悬停逻辑。
• 自定义状态与延迟控制：用isOpen控制菜单显示，timeoutRef存储延迟关闭定时器，300ms的缓冲时间能避免鼠标从按钮移到菜单时菜单意外关闭。
• 双向悬停监听：同时给触发元素和菜单面板添加鼠标事件，确保鼠标在菜单区域内时保持菜单打开。
• 样式适配：把原依赖Popover内置open状态的样式切换，改为依赖自定义的isOpen状态，保留原有的视觉反馈效果。

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