纯CSS用:hover伪类可直接实现文字悬停变色，需注意元素类型、LVHA顺序、内联元素盒模型及移动端hover限制。

用 CSS 的 :hover 伪类最直接

不用 JS，纯 CSS 就能搞定。核心是给文字所在元素（比如 <p>、<span>、<a>）加 :hover 样式。浏览器原生支持，兼容性好，性能零开销。

常见写法：

p:hover {
  color: #ff6b35;
}

但注意：如果文字在 <a> 里，默认已有下划线和颜色，直接写 a:hover 可能被浏览器默认样式干扰，建议显式重置：

• 加 text-decoration: none 去掉下划线（如不需要）
• 加 color: #2a5800 明确指定颜色，避免继承或用户代理样式影响
• 若想只让文字变色、不带动画突兀感，可加 transition: color 0.2s

文字是链接时，a:hover 顺序不能错

CSS 中 a 元素有四个常用状态伪类：:link、:visited、:hover、:active。如果顺序写反（比如把 :hover 放在 :visited 前面），某些浏览器会忽略 :hover 样式——尤其当链接已被访问过。

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

必须按 LVHA 顺序写：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

a:link { color: #007bff; }
a:visited { color: #6f42c1; }
a:hover { color: #dc3545; }
a:active { color: #0056b3; }

否则鼠标滑过已访问链接时，颜色可能不变。

内联元素（如 <span>）要确保可触发 :hover

<span> 默认是内联元素，没有宽高，有时鼠标看似“悬停”实则没真正进入元素范围，导致 :hover 不生效。

• 检查是否被父容器裁剪（overflow: hidden 或定位遮挡）
• 确认 <span> 确实包裹了完整文字，没有空格或换行被意外截断
• 更稳妥的做法：给 <span> 加 display: inline-block 或 cursor: pointer（后者虽不改变盒模型，但能提示用户此处可交互，也间接帮助调试 hover 区域）

移动端点按失效？别忘了 :hover 在触摸设备上的限制

iOS 和部分安卓浏览器对 :hover 支持有限：首次触摸时可能触发一次，之后不再响应，或干脆不触发。这不是 bug，是规范行为——因为触摸屏没有“悬停”概念。

如果 index.html 需兼顾手机用户：

• 不要依赖 :hover 实现关键功能（比如仅靠 hover 展开菜单）
• 可用 @media (hover: hover) 媒体查询做条件启用：

  @media (hover: hover) {
    .nav-item:hover { color: #e74c3c; }
  }

• 或者改用 JS 监听 touchstart + touchend 模拟 hover 效果（仅当必要）

多数静态页面文字变色需求，在桌面端用 :hover 足够；真要跨端一致，得接受“手机端点一下才变色”这个事实，而不是强行模拟悬停。