Tailwind CSS group-hover加transition实现hover后菜单停留3秒失效问题

问题根因 #

display 属性不支持CSS过渡动画，你之前配置的hidden（对应display: none）和group-hover:block切换时，transition配置无法作用到display属性上，所以延迟效果不生效。

解决方案（纯CSS实现，无需额外JS） #

只需要修改下拉菜单的类配置，用支持过渡的opacity和visibility替代display控制显隐即可：

1. 外层的<div class="relative group"> 保持原有配置不变
2. 下拉菜单节点的类做如下调整：
   • 移除原有 hidden 和 group-hover:block 类
   • 新增如下类配置：

   class="opacity-0 invisible pointer-events-none transition-[opacity,visibility] duration-200 delay-[3000ms] group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto group-hover:delay-0"
   

配置说明 #

• 默认状态下设置3秒延迟（delay-[3000ms]），鼠标离开触发容器后，下拉菜单会等待3秒再开始隐藏过渡
• hover状态下重置延迟为0（group-hover:delay-0），保证鼠标移入时立即显示菜单，无触发延迟
• 如果你需要调整保持显示的时长，直接修改delay-[3000ms]的数值即可，单位为毫秒
• pointer-events-none 是为了隐藏状态下菜单不会拦截鼠标事件，避免误触发
• 若你的Tailwind版本不支持方括号语法的自定义过渡属性，把transition-[opacity,visibility]替换为transition-all即可正常运行

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