CSS伪类在响应式菜单中的应用_结合hover与媒体查询

移动端不支持:hover伪类，需用@media (hover: hover) and (pointer: fine)限定桌面端，菜单展开必须js兜底并配合:focus-within和data属性控制状态。

hover 伪类在移动端根本不会触发

响应式菜单里写 :hover，结果在手机上点不动、没反应——不是你代码错了，是浏览器压根不支持。移动端没有“悬停”这个概念，触摸屏只有 touchstart 和点击事件，:hover 只会在首次触摸后短暂生效（ios safari 甚至要等 300ms 延迟），接着就失效了。

• 别把 :hover 当作菜单展开的唯一条件，尤其不能只靠它控制 display: none → block
• 真要用 :hover，必须搭配媒体查询限定仅桌面端：@media (hover: hover) and (pointer: fine)
• 这个媒体查询才是现代判断“有精确指针且支持悬停”的标准方式，比 min-width 更可靠

用 @media (hover: hover) 安全启用悬停交互

这个媒体查询不是可有可无的装饰，它是 css 层面识别“设备是否真正支持 hover”的唯一靠谱手段。不加它，你的 :hover 样式会在 ipad 或折叠屏上意外激活，造成菜单闪退或误操作。

• 写法必须完整：@media (hover: hover) and (pointer: fine) { .menu-item:hover > .submenu { display: block; } }
• pointer: fine 排除触控笔精度低的设备（比如某些安卓平板），避免误判
• 不要只写 @media (hover: hover) 单独一层——部分旧浏览器会错误匹配，导致移动端也加载 hover 样式

菜单展开逻辑不能只靠 CSS，JS 得兜底

纯 CSS 实现的响应式菜单，一旦用户缩放页面、切到分屏模式、或系统开启强制减少动画，:hover 就可能失效或延迟。这时候菜单卡住、子项不收起，用户就懵了。

• 给菜单容器加一个 data-menu-state="closed" 属性，用 JS 控制开关，CSS 只负责视觉状态
• 监听 click 和 keydown（回车/空格），确保键盘用户也能操作
• 在 resize 事件里重置移动端菜单状态，防止横竖屏切换后状态错乱
• 示例：点击父项时，先 Event.preventDefault()，再 toggleAttribute('data-expanded')，CSS 用 [data-expanded] 匹配

伪类组合容易被忽略的层叠顺序问题

:hover 和 :focus 同时存在时，如果没写对顺序，焦点态会被悬停态覆盖，键盘用户 tab 进去却看不到高亮。

立即学习“前端免费学习笔记（深入）”；

• CSS 伪类顺序必须是 :link → :visited → :focus → :hover → :active（LoVe HAte 记忆法）
• 响应式菜单里常见错误：写了 .menu-item:hover .submenu，但没写 .menu-item:focus-within .submenu，导致键盘无法展开
• :focus-within 是关键替代方案，它能在子元素获得焦点时激活父容器样式，兼容性到 chrome 65+/firefox 61+，足够覆盖主流环境

实际项目里最麻烦的不是写不出效果，而是同一套菜单在 iPad 的 Safari、Chrome 的响应式调试工具、还有 windows 触摸本上表现全都不一样。得把 hover 当成可选增强，而不是功能前提。