如何用Tailwind检测元素点击实现动画及hover后菜单常驻

1. 点击触发菜单滑入动画（结合状态与Peer类） #

Tailwind的peer类仅支持hover、focus等伪状态，无法直接检测点击事件。但可以结合状态变量和条件类，既保留滑入动画，又实现点击触发逻辑：

修改父组件，添加状态控制菜单显隐：

import { useState } from 'react';

// 父组件内部
const [isMenuOpen, setIsMenuOpen] = useState(false);

return (
  <div className="relative">
    <Image
      className="rounded-full cursor-pointer peer"
      src={currentUser?.user.image}
      alt="user avatar"
      width="35"
      height="35"
      onClick={() => setIsMenuOpen(!isMenuOpen)}
    />
    <UserMenu isOpen={isMenuOpen} />
  </div>
);

更新用户菜单组件，同时支持hover和点击两种触发方式：

// UserMenu组件
<div
  className={`absolute bg-black top-[59px] left-[100px] rounded-bottom-md transform duration-200
    ${isOpen ? '-translate-x-[200px]' : 'translate-x-0'}
    peer-hover:-translate-x-[200px]`}
>
  {userMenuItems.map((item) => (
    <div key={item.label} className="py-4 px-8 flex items-center text-zinc-400 cursor-pointer hover:text-white">
      {item.label}
    </div>
  ))}
</div>

2. 实现hover触发后菜单常驻 #

要让菜单在hover触发后保持显示，需要统一监听父容器的鼠标事件，避免鼠标在头像和菜单间切换时菜单闪烁：

修改父组件为：

<div 
  className="relative"
  onMouseEnter={() => setIsMenuOpen(true)}
  onMouseLeave={() => setTimeout(() => setIsMenuOpen(false), 200)}
>
  <Image
    className="rounded-full cursor-pointer peer"
    src={currentUser?.user.image}
    alt="user avatar"
    width="35"
    height="35"
    onClick={() => setIsMenuOpen(!isMenuOpen)}
  />
  <UserMenu isOpen={isMenuOpen} />
</div>

核心说明 #

• 用状态变量弥补peer类不支持点击状态的缺陷，同时保留Tailwind的动画效果
• 父容器统一管理鼠标事件，确保鼠标从头像移到菜单时菜单不会立即关闭
• 添加setTimeout延迟关闭逻辑，优化交互体验

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