group必须显式加在父容器上，不能用hover:group代替；group-hover仅对后代生效，需确保dom包裹关系、可悬停区域及初始样式与过渡配置齐全。
group-hover 不是伪类，它依赖显式声明的 group 类才能生效——没加 group，group-hover 就不会被编译进 CSS，也永远不会触发。
父容器必须显式写 group，不能用 hover:group
这是 90% 失效问题的根源。Tailwind 根本不识别 hover:group 这种写法，它不是修饰符，而是一个独立的基础类，只起“声明上下文”作用，本身不带任何样式。
-
<div class="hover:group"></div>→ 完全无效，编译器忽略，CSS 中找不到对应规则 -
<div class="group"><span class="group-hover:text-red-500">文字</span></div>→ 正确，group存在，group-hover才会被生成 - 检查方式：打开 DevTools，选中父元素，在 Styles 面板搜索
.group:hover，没出现说明group没被识别
group-hover 只对后代元素生效，且受 DOM 层级严格约束
CSS 没有父选择器，group-hover 本质是生成 .group:hover .group-hover\:xxx 这样的后代选择器，所以子元素必须真实位于 group 容器内部（哪怕嵌套多层），不能靠兄弟、同级或组件封装“透传”。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- ✅ 有效：
<div class="group"> <button></button><svg class="group-hover:opacity-100"></svg> </div> - ❌ 无效：
<div class="group"><button></button></div> <svg class="group-hover:opacity-100"></svg>（svg是兄弟，非后代） - React/Vue 组件中失效？大概率是封装组件没把
group加到其根节点上，临时把子元素提出来直连group容器可快速验证
绝对定位、Flex/Grid 容器和 PurgeCSS 是三大隐形陷阱
视觉上“悬停没反应”，往往不是逻辑错，而是交互区域丢失或 CSS 被删了。
- 绝对定位子元素脱离文档流 → hover 事件可能没传到
group容器，给该元素加pointer-events: auto - 把
group错加在 Flex item 上，而不是 Flex container → hover 区域实际落在容器上，item 上的group形同虚设 - 开了 PurgeCSS（现在叫 content）但模板里没真实出现
group+group-hover:xxx组合 → 构建时直接删掉，CSS 里根本不存在这条规则
响应式、过渡和初始状态缺一不可
group-hover 不是魔法开关，它只在已有基础样式前提下做变更；没有过渡，变化就是瞬切；没写断点组合，响应式就失效。
- 写了
group-hover:translate-x-2却没配transition-transform→ 动作生硬或不可见 - 想在中屏生效
md:group-hover:scale-110？Tailwind 不支持这种写法，必须拆成md:scale-100 md:group-hover:scale-110 - 只写
group-hover:opacity-100，但元素初始没设opacity-0或opacity-75→ 看不出变化
真正容易被忽略的，是 group 的“触发区域”本身——它得是个能接收鼠标事件的块级区域，padding、min-height、display:block 缺一不可，否则 hover 根本不会触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
