:hover 实现标签页切换技术可行但不可用，因无法保持状态、不支持键盘导航、移动端失效、违反可访问性标准；必须用 JavaScript 响应 click/keydown 并管理 ARIA 属性。
纯 CSS 的 :hover 实现标签页悬停切换，技术上可行，但实际项目中不推荐——它无法保持状态、不支持键盘导航、移动端完全失效，且与可访问性标准（WCAG）冲突。
为什么 :hover 切换标签页在真实项目中基本不可用
浏览器对 :hover 的触发有明确限制：仅在指针设备（如鼠标）且未发生触摸事件后才生效；iOS Safari 和 Android Chrome 在触摸后会短暂保留 hover 状态，但随即清空，导致“悬停即闪退”。更关键的是：
- 用户无法用 Tab 键聚焦并回车激活标签，屏幕阅读器无法感知当前激活项
- 悬停离开瞬间内容就隐藏，用户来不及阅读或操作子元素（比如链接、表单控件）
- 没有
aria-selected、aria-controls等语义属性，违反 WAI-ARIA 标签页规范 - SEO 不友好：搜索引擎可能忽略未激活状态下被
display: none隐藏的内容
click 事件 + aria 属性才是合规的起点
必须用 JavaScript 响应 click（同时兼容 keydown 的 Space/Enter），并同步管理 ARIA 状态。核心逻辑不是“怎么切换”，而是“怎么让切换可感知、可操作、可恢复”：
- 每个
tab-button要有role="tab"、aria-selected="true/false"、aria-controls="panel-id" - 对应
tab-panel要有role="tabpanel"、aria-labelledby="button-id"，且仅激活项设tabindex="0" - 点击时，用
element.focus()主动聚焦到面板，确保键盘用户能继续操作内部元素 - 避免直接写
display: none，改用visibility: hidden; position: absolute; clip-path: inset(100%)保内容可读性
如果非要加悬停反馈，只做视觉增强，不改变功能
可以保留 :hover 作为辅助效果，但绝不让它承担切换职责。例如：
.tab-button:hover:not(.active) {
background-color: #eef2ff;
color: #4f46e5;
}
.tab-button:focus-visible:not(.active) {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
这类样式只用于提示“这个按钮可点”，真正切换仍由 click/keydown 触发。注意：:focus-visible 比 :focus 更安全，避免鼠标点击时出现突兀边框。
移动端和混合输入设备的兼容陷阱
现代浏览器（Chrome 120+、Safari 17.4+）已支持 hover 媒体查询，但判断逻辑复杂：
-
@media (hover: hover)表示设备“有能力悬停”，不代表当前正在用鼠标 - 触摸屏用户接上蓝牙鼠标，
hover立即生效；反之，桌面用户用触控板轻点，也可能触发误判 - 不要用
@media (hover: none)直接禁用所有 hover 样式——这会让 Windows 触控笔用户失去反馈 - 真正可靠的方案是监听
pointerdown类型，动态打标记：if (e.pointerType === 'mouse') { useHoverFeedback = true; }
最易被忽略的一点：标签页切换若涉及异步加载（比如懒加载 panel 内容），click 后必须显示 loading 状态，并禁用其他 tab 按钮，否则用户连续点击会触发多次请求——这个控制点，:hover 根本无从介入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
