:hover 伪类可直接改变文字颜色，无需下划线或改类名；关键在于选择器结构正确（如 a:hover），避免被其他样式覆盖、继承透明色或优先级不足，并注意移动端不支持及高对比度模式下的失效问题。
hover 时改颜色，直接用 :hover 配合 color
不用加下划线、不用改类名，:hover 伪类本身就能触发样式变化。关键不是“怎么结合”，而是“别写错选择器结构”——常见错误是把 :hover 写在标签外、或漏掉冒号、或嵌套层级不对。
-
:hover必须紧跟在要响应悬停的元素选择器后面，比如a:hover、.btn:hover、button:hover - 不要写成
a :hover（中间有空格 → 变成后代选择器，不生效） - 如果目标是文字链接，记得检查是否被
a:visited或a:link的优先级覆盖
为什么改了 color 没反应？常见干扰项
最常踩的坑不是语法错，而是样式被其他规则压住，或者颜色值本身不可见。
- 检查是否用了简写属性（如
all: unset或inherit）清掉了默认文本色 - 确认父容器没设
color: transparent或opacity: 0，子元素继承后 hover 也透明 -
浏览器开发者工具里看 computed 样式，确认
:hover规则真的被应用了，且没被 strikethrough（划掉） - 某些 UI 框架（如 Bootstrap）对
a标签预设了:hover，你得提高自己样式的优先级，比如加!important（临时调试可用），或用更具体的选择器：.nav-link:hover而非a:hover
支持渐变色或过渡动画吗？color 本身可过渡，但有限制
color 是 CSS 中少数原生支持过渡的属性之一，但仅限于颜色关键词、十六进制、rgb/rgba、hsl/hsla 这些可插值格式。不能过渡到 transparent（部分旧版 Safari 不支持）、也不能过渡到系统色（如 CanvasText）。
- 想加淡入效果，直接加
transition: color 0.2s ease到常态规则里，不是 hover 里 - 避免写成
transition: all 0.2s—— 过度泛化可能引发重排或意外动画 - 如果要用渐变文字（比如从黑变蓝），
color不行，得用background-image: linear-gradient()+-webkit-background-clip: text+color: transparent，且 hover 时只换 background-position 或 background-size
button {
color: #333;
transition: color 0.2s ease;
}
button:hover {
color: #007bff;
}
移动端 hover 无效？不是 bug，是设计使然
绝大多数触摸设备（iOS Safari、Android Chrome）不触发 :hover，除非用户“模拟悬停”（比如长按后松开瞬间），但行为不稳定。这不是 CSS 错，是浏览器主动降级交互逻辑。
立即学习“前端免费学习笔记（深入）”；
- 纯靠
:hover实现关键功能（如菜单展开、提示显示）会导致移动端不可用 - 稳妥做法：用 JavaScript 监听
touchstart/click补充交互，或改用:focus+tabindex支持键盘和触屏双路径 - 如果只是视觉反馈，可加
@media (hover: hover)媒体查询做条件启用
color 值。如果你的项目要过无障碍审核，得额外测试 Windows 高对比主题或 macOS VoiceOver 下的表现。 
