Group-hover 为什么必须配合 group 类使用
直接写 group-hover:xxx 没效果，是因为 Tailwind 的 group-hover 是一个“依赖类”——它只在父元素有 group 类时才生效。没有 group，group-hover 根本不会被编译进 CSS。
- 错误写法：
<div><span class="group-hover:text-red-500">文字</span></div>→ 完全无效 - 正确结构：
<div class="group"><span class="group-hover:text-red-500">文字</span></div> -
group必须加在触发 hover 的祖先容器上（不一定是直接父级，但必须是 DOM 上层）
子元素 hover 状态下修改父级以外的兄弟元素
常见需求：鼠标悬停在按钮上，让旁边的图标变色或显示隐藏内容。这时不能靠 group-hover 直接改“前面”的兄弟元素，因为 CSS 无法向上选择器（no parent selector）。得靠 DOM 顺序调整 + group 包裹共同祖先。
- ✅ 可行：把按钮和图标都包进同一个
group容器，用group-hover分别作用于各自元素 - ❌ 不可行：按钮在
div.group里，图标在外部 → 无法联动 - 示例：
<div class="group"> <button class="group-hover:bg-blue-100">操作</button><svg class="group-hover:opacity-100"></svg> </div>
group-hover 在 flex / grid 布局中失效的典型原因
布局容器设了 display: flex 或 grid 后，子元素若用了 absolute、transform 或 z-index，可能造成 hover 区域错位，看起来像 group-hover “失灵”。
- 检查是否误将
group加在 flex item 上，而 hover 实际落在其内部子节点 → 应该把group提到 flex container 层 - 绝对定位元素脱离文档流，hover 事件可能没触发到包裹它的
group容器 → 给该元素加pointer-events: auto - 某些 UI 库（如 Headless UI）的
Popover或Dropdown内部会动态挂载 DOM，此时原group容器已不包含新节点 → 需用group包裹整个逻辑块，而非仅静态 HTML
和普通 hover 相比，group-hover 的性能与兼容性差异
group-hover 本质是生成标准 CSS :hover 伪类规则，运行时性能和原生 hover 一致，无额外开销。但要注意构建时行为：
立即学习“前端免费学习笔记（深入）”；
- Tailwind 默认只生成你实际用到的
group-hover变体，没写的不会打进 CSS —— 所以不要指望“写了 class 就自动生效”，必须出现在源码中 - IE 不支持
:hover作用于非<a></a>元素，所以group-hover在 IE 下完全不可用（连带影响所有基于它的交互） - 如果项目开了
purge（现在叫content），确保模板中真实存在group+group-hover:xxx组合，否则会被删掉
真正容易被忽略的是：group-hover 的“触发区域”完全取决于你加 group 的那个元素的尺寸和可交互范围。很多时候不是语法错了，而是那个容器太小、透明、或者被其他元素盖住了。先 inspect 元素，确认 hover 确实落在 group 节点上，再调样式。
