鼠标移入无反应主因是:hover作用对象错误或被样式覆盖；需确保交互元素本身可悬停，检查pointer-events、覆盖层及选择器优先级，移动端应改用javascript模拟，键盘导航需配合tabindex与:focus-within。
hover 伪类触发高亮时，为什么鼠标移入没反应？
多数情况是 :hover 作用对象不对或被其他样式覆盖。列表项高亮必须确保目标元素可交互——<li> 默认可 hover，但若它内部套了 <a></a> 或 <span></span>，而你只给 li:hover 写样式，实际悬停在链接上时就可能失效。
实操建议：
- 优先对交互容器本身写
:hover，比如li:hover或a:hover，别依赖父级悬停影响子元素背景色（除非明确需要） - 检查是否加了
pointer-events: none或透明度为 0 的覆盖层挡住了事件 - 用浏览器开发者工具的“Elements”面板，勾选 “:hover” 强制触发，确认样式规则是否被
!important或更具体的选择器压制
用 :nth-child() 配合 :hover 实现隔行高亮差异
单纯 li:hover 所有项表现一致；想让第 1、3、5 项悬停时变蓝，2、4、6 变灰，就得组合伪类。注意：:nth-child(n) 匹配的是 DOM 顺序位置，不是列表数据序号。
常见误用：
-
li:nth-child(odd):hover→ 正确，奇数位li悬停时生效 -
li:hover:nth-child(odd)→ 无效，伪类顺序不能颠倒 - 如果列表前有标题
<h3></h3>，li:nth-child(1)实际可能匹配不到第一个li，改用li:nth-of-type(1)更稳
示例：
li:nth-child(odd):hover { background-color: #e6f7ff; }
li:nth-child(even):hover { background-color: #f0f0f0; }
移动端 touch 设备下 :hover 不触发怎么办？
CSS :hover 在 iOS 和部分安卓浏览器中默认不模拟悬停状态，尤其 Safari —— 点击后才短暂触发，松手即消失，无法维持高亮。
解决路径有限，推荐务实做法：
- 放弃纯 CSS 的 hover 高亮，改用
:active+ JavaScriptclassList.toggle()控制临时 class - 若坚持用伪类，可加
*:hover { }触发全局 hover 支持（仅限 Safari 移动端，且需用户首次点击任意可点击元素） - 更可靠的是监听
touchstart和touchend，动态添加is-hovered类，再用.is-hovered替代:hover
:focus-within 与列表键盘导航的兼容性陷阱
想支持键盘 Tab 导航并高亮当前聚焦项？别只靠 li:focus —— <li> 默认不可聚焦，除非加 tabindex="0"。但更好的方式是把焦点落在内部可聚焦元素（如 <a></a> 或 <button></button>）上，再用 li:focus-within 捕获。
关键点：
-
:focus-within在 Firefox 和 Chrome ≥ 61 支持良好，IE 完全不支持，Edge 17+ 开始支持 - 避免写
li:focus-within:hover：当用户用键盘聚焦后再悬停，会叠加生效，视觉混乱 - 若列表项含多个可聚焦子元素，
:focus-within仍能准确捕获，比监听每个子元素的 focus 更简洁
示例结构：
li:focus-within { background-color: #d0eaff; }
实际项目里最常被忽略的，是伪类生效的前提：元素得真正参与交互流程。没有 tabindex 就没有键盘焦点，没有可点击区域或 pointer-events 设置就拦掉鼠标事件，而移动设备根本不会按桌面逻辑解释 :hover。把这些链路理清，比堆砌伪类组合更重要。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
