父元素未加 group 类是最常见原因，必须为干净的 group 二字加空格；需作用于直接父级，不可穿透；配置前缀时类名须同步修改；绝对定位子元素溢出可能误触发 group-hover。
父元素没加 group 类是最常见原因
几乎所有 group-hover 失效的案例，第一步都该检查父容器是否真的写了 group。不是 hover:group，不是 group-，也不是 gropu 拼错——必须是干净的 group 两个字母加一个空格分隔。
常见误写：
-
class="hover:group"→ 完全无效，Tailwind 不识别这种写法 -
class="group- hover:bg-red-500"→ 前缀错误，且类名被空格断开 -
class="grouped"或class="grouping"→ 拼写偏差，编译器不会匹配
验证方法：打开浏览器开发者工具，选中父元素，看 computed styles 里有没有 .group:hover .group-hover\:* 这类选择器。没有？说明 group 根本没被识别。
group 必须作用于直接父级，不能靠“穿透”生效
group-hover 依赖 CSS 后代选择器（.group:hover .group-hover\:opacity-100），所以子元素必须能通过 DOM 路径被父级 group 容器“看到”。中间插一层没透传 class 的封装组件，就会断链。
典型断裂场景：
- React 中：
Card组件内部没把group加到它的根div上 - Vue 使用
:class动态绑定时，漏掉了group，比如只写了:class="{ 'hover:bg-blue-500': active }" - 用了 Shadow DOM 的 Web Component，外部 class 无法影响内部样式作用域
简单测试：把子元素临时剪切出来，直接放在父 div class="group" 内部，不经过任何组件包装，看 group-hover 是否恢复——能恢复，就说明是封装层阻断了。
带前缀的 Tailwind 配置会改写 group 行为
如果你在 tailwind.config.js 里设了 prefix: "tw-"，那所有 group 相关类名都会被重命名：group 变成 tw-group，group-hover:opacity-100 变成 tw-group-hover:tw-opacity-100。
此时如果还写 class="group" 和 group-hover:opacity-100，编译器根本找不到对应规则，自然不生效。
检查方式：
- 打开编译后的 CSS 文件，搜索
tw-group或group，确认实际输出的类名前缀 - 若配置了前缀，HTML 中必须同步改成
class="tw-group"和class="tw-group-hover:tw-opacity-100" - 别混用：不要一半写
tw-group，一半写group-hover，Tailwind 不做映射兼容
绝对定位子元素可能意外覆盖并触发 group-hover
当 group-hover 元素本身是 absolute 定位，且其父容器没设 overflow-hidden，它就可能溢出、覆盖到相邻区域（比如 header 上方），导致鼠标移过去时，其实悬停的是这个“飘出来”的子元素，而非你预期的父容器。
现象：悬停某个按钮，结果远在下方的卡片突然变色。
排查要点：
- 用 DevTools 的 “Toggle element screenshot” 功能，看
group-hover元素的实际渲染区域是否超出预期 - 给父容器加
relative+overflow-hidden，快速验证是否是溢出干扰 - 避免在
group容器内对group-hover子元素用top: 0; left: 0; width: 100vw; height: 100vh这类全局占位写法
真正容易被忽略的是：这种覆盖往往在开发阶段因内容少看不出来，上线后数据一多，绝对定位元素突然撑开、盖住其他模块，group-hover 就开始“乱触发”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
