超链接悬停变色用 :hover 伪类即可，需写在 style 标签或外部 css 中，遵循 lvha 顺序定义 link、visited、hover、active 状态，并注意移动端 hover 行为限制。
超链接悬停变色用 :hover 就够了
直接加 CSS 伪类就行，不用 JS，也不用额外 HTML 属性。:hover 是最标准、兼容性最好的方式，所有现代浏览器都支持（包括 IE9+）。
常见错误是写成 a:hover color: #f00;（漏了花括号或冒号），或者把样式写在 <style></style> 外面当成 HTML 属性用。
- 必须写在
<style></style>标签里，或外部 CSS 文件中 - 选择器要具体：比如
a:hover会匹配所有超链接；若只想改导航栏里的，用.nav a:hover - 颜色值支持
#ff0000、red、rgb(255,0,0)、hsl(0,100%,50%)等，但推荐用十六进制或命名色，兼容性更稳
a 标签默认样式会影响悬停效果
浏览器会给 @#@#@#@#@#@#@#@#@#@0 —— 这完全无效。:hover 是 CSS 伪类，只能出现在样式表中，不能塞进 style 属性里。
如果必须动态控制（比如某几个链接单独变色），正确做法是：
- 提前写好类名，例如
.highlight-on-hover:hover { color: #c0392b; } - 运行时用 JS 切换 class：
linkElement.classList.add('highlight-on-hover') - 别用
style.color = 'red'想手动模拟 hover，它无法响应鼠标移出
移动端触摸设备的 :hover 行为要小心
iOS Safari 和部分安卓浏览器对 :hover 支持有限：第一次点击才触发，且不会自动“取消 hover”（导致悬停态残留）。这不是 bug，是规范行为。
如果页面需兼顾触屏用户，建议：
- 别依赖
:hover做关键交互提示（比如仅靠变色指示可点击） - 配合
:active做点击反馈：a:active { opacity: 0.7; } - 必要时用 JS 监听
touchstart添加临时 class，但优先考虑设计上不依赖悬停
真正难的不是写几行 CSS，而是判断这个变色是否在所有设备上都传达了相同意图——颜色变了，但用户得明白“这代表什么”。
code {
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
color: #e74c3c;
text-decoration: underline;
}
a:visited {
color: #8e44ad;
}
a:focus {
outline: 2px solid #3498db;
}
}前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
