hover:text-white对子元素无效，因为tailwind的hover修饰符仅作用于当前元素自身，不穿透影响子元素；需用group+group-hover方案：父容器加group类，子元素用group-hover:text-white等控制。
hover:text-white 为什么对子元素无效
因为 Tailwind 的 hover: 修饰符只作用于当前元素自身，不会穿透到子元素。比如给父 <div> 加 <code>hover:text-white，它只会尝试改变这个 <div> 的文字颜色（如果它自己有文本），而子 <code><span class="text-gray-500"></span> 完全不受影响——CSS 没有继承 hover 状态这回事。
用 group + group-hover 替代 hover 直接控制子元素
这是 Tailwind 官方推荐的、唯一可靠的父级悬停联动子元素方案：
-
group必须显式加在父容器上，不能写成hover:group（该写法完全无效） - 所有需要响应悬停的子元素，改用
group-hover:text-white、group-hover:scale-105等，而不是hover: - 子元素原有样式（如
text-gray-500）会被group-hover:text-white正常覆盖，前提是二者都是 class 且顺序合理（Tailwind 默认把 group-hover 规则生成在后面） - group 容器本身要有可悬停区域：不能是空标签、不能有
pointer-events: none、建议设block或带padding
常见失效场景和排查点
即使写了 group 和 group-hover，也可能没反应，重点检查这几处：
- DOM 层级错误：子元素不在
group容器内，比如兄弟节点或外层包裹漏了group - 移动端误判：iOS Safari 和安卓 WebView 对 hover 支持极弱，首次点击可能触发一次，之后失效；需搭配
focus-within:或active:降级 - transform 动画没动：用了
group-hover:scale-105却“啪”一下跳变？必须加transition-transform duration-300 ease-out，且写在常态元素上 - 响应式写错：
md:group-hover:scale-105是非法类名；正确写法是md:scale-100 md:group-hover:scale-105
要不要给所有子元素都加 group-hover？
不一定。如果只是统一改颜色或透明度，可以移除子元素的默认 text-gray-500，只在父容器加 group，再让所有子元素靠继承或通用类响应——但要注意，纯文本节点不继承 color，仍得每个子标签加 group-hover:text-white。更稳妥的做法是：只给真正需要变化的子元素加 group-hover:，避免无谓的样式冗余和重绘。
