直接写 hover:hover:bg-blue-500 不生效，因为 Tailwind 的 hover: 仅作用于自身且浏览器不支持 :hover:hover；应使用 group + group-hover 实现父级驱动的悬停效果。
为什么直接写 hover:hover:bg-blue-500 不生效
Tailwind 的 hover: 是单层状态修饰符，只绑定到当前元素自身。浏览器原生 CSS 也不支持 :hover:hover 这种伪类，所以这类写法会被忽略或编译失败。你看到的“父 hover 子变色”，往往只是巧合（比如子元素恰好也绑了独立 hover:），并非嵌套触发。
用 group + group-hover 实现真正的父级驱动
group 是一个无样式标记类，必须加在**最靠近目标子元素的父容器**上；所有需响应父级 hover 的子元素，把 hover: 换成 group-hover:。
- 父容器加
group，子元素用group-hover:text-white group-hover:scale-105等 - 支持任意 Tailwind 属性，包括
group-hover:rotate-12、group-hover:opacity-80 - 若中间有
relative或z-index干扰，可能缩小 hover 触发区域，建议保持 DOM 路径干净、避免多余定位 - 不能跳层：如果父容器是
div > section > div，group必须加在中间的section上，而非最外层div
多层嵌套时怎么避免 group 堆叠混乱
一个 group 可覆盖其全部后代，不需要为每层都加 group。但若需「二级菜单在一级菜单 hover 时展开，且菜单项 hover 时高亮」，就得嵌套两组 group：
- 一级菜单容器加
group，二级菜单用group-hover:block - 二级菜单内部项再加自己的
group，再配group-hover:bg-gray-100 - 注意：内层
group不会影响外层逻辑，二者独立作用 - 别用
group-hover:group-hover:—— Tailwind 不支持这种链式写法
group-hover 和子元素自身 hover 共存时的冲突处理
子元素可以同时拥有 group-hover:text-red-500 和 hover:text-blue-500，但最终效果取决于 CSS 特异性（specificity）和声明顺序。
- 两者都是 class，权重相同，后写的会覆盖先写的
- 若想优先响应父级 hover，就把
group-hover:放在 class 列表前面 - 若子元素自身 hover 行为更关键（如按钮图标旋转），就把它放后面，并确保它不被
group-hover:覆盖无关属性（比如只改rotate，不碰text-color） - 避免对同一属性重复定义，例如同时写
group-hover:text-white hover:text-black—— 这会引发不可预测的切换抖动
真正难的是层级判断：DOM 路径稍一变动，group 就失效；而开发者常误以为加了 group 就万事大吉，忘了检查它是否真的包裹住了目标子元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
