优先用 :hover 处理纯视觉悬停反馈，如菜单显示/隐藏，需结构合理（菜单嵌套在触发元素父容器内）；配合 :focus-within 保障键盘可访问性；跨容器联动、动态加载、复杂权限判断等场景仍需 JS。
直接用 :hover 等伪类替代大量 onMouseEnter/onMouseLeave 脚本，是提升响应速度、简化逻辑、降低渲染负担的有效方式——前提是结构合理、场景匹配。
优先用 :hover 处理“显示/隐藏”类交互
当目标是鼠标悬停时显示下拉菜单、工具提示、状态图标切换等「纯视觉反馈」时，CSS :hover 是首选。它由浏览器原生触发，无 JS 解析延迟，且天然支持“父容器悬停 → 子元素保持可见”的连贯行为（只要子元素在父元素 DOM 树内）。
- 把菜单包裹在触发按钮的同一父容器中，例如：
<div class="dropdown"><button>Menu</button><ul class="menu">...</ul></div> - 写 CSS：
.dropdown:hover .menu { opacity: 1; visibility: visible; }，配合过渡动画即可平滑展开 - 避免把菜单放在 body 下层或用
position: fixed脱离父流，否则悬停中断会立即收起
用 :focus-within 支持键盘可访问性
仅靠 :hover 不满足无障碍要求。若组件需键盘操作（如 Tab 进入后展开），应叠加 :focus-within：
.dropdown:focus-within .menu, .dropdown:hover .menu { ... }- 确保可聚焦元素（如
<button>或带tabindex="0"的容器）在结构中存在 - 这样既保留纯 CSS 响应优势，又通过语义化支持屏幕阅读器和键盘用户
避开 :hover 的三大典型失效场景
不是所有悬停需求都适合纯 CSS。以下情况建议保留 JS 事件：
立即学习“前端免费学习笔记（深入）”；
-
跨容器联动：鼠标从 A 元素移入 B 元素（B 不在 A 的 DOM 子树中），
:hover无法捕获这种关系 - 动态内容加载：悬停时需发请求获取数据再渲染内容，CSS 无执行能力
- 复杂状态判断：例如“仅当用户已登录且权限为 admin 时才显示操作项”，需运行 JS 条件逻辑
兼容旧环境时的轻量降级方案
如果仍需支持 IE8–IE10 等老旧浏览器，不推荐写一堆条件注释或手动绑定 JS 事件。更干净的做法是：
- 默认启用
:hover规则（现代浏览器直用） - 对旧环境单独加一个 class（如
no-hover-support），用 JS 检测并添加该 class 到<html> - 写降级样式：
.no-hover-support .dropdown:hover .menu { … }不生效，改用.no-hover-support .dropdown.hover-active .menu { … }，JS 只负责切换hover-active
CSS 伪类不是万能的，但在它适用的地方，比高频 JS 事件更轻、更稳、更易维护。
