使用CSS的:hover伪类配合color属性可实现鼠标悬停时文字变色。1. 基本语法为a:hover { color: red; }，表示鼠标悬停时文字变为红色。2. 实际示例中，给p标签添加.highlight类，初始颜色为深灰色，通过.transition设置0.3秒过渡效果，悬停时文字变为蓝色。3. 该方法适用于多种元素，如h2:hover可改变标题颜色，.button:hover可改变按钮文字颜色。4. 可结合text-decoration、font-weight等属性增强交互效果，例如.link-text:hover同时改变颜色、加粗字体并添加下划线，提升用户体验。整个过程无需JavaScript，纯CSS实现，适合初学者练习，是提升网页互动性的基础技巧。
当鼠标悬停在文字上时改变其颜色，是网页中常见的交互效果。实现这个效果最简单的方法就是使用CSS的 :hover 伪类配合 color 属性。整个过程不需要JavaScript，纯CSS即可完成，适合CSS初学者练习。
1. 基本语法结构
:hover 伪类用于定义元素在被鼠标指针悬停时的样式。结合 color 属性，可以直接修改文字颜色。
a:hover {
color: red;
}
上面的代码表示：当用户把鼠标移到 a 标签上时，文字颜色变为红色。
2. 实际示例：让普通文本悬停变色
下面是一个完整的HTML和CSS例子，展示如何让一段普通文字在悬停时变色。
立即学习“前端免费学习笔记（深入）”；
将鼠标放上来，文字会变色！
说明：
- 初始颜色为深灰色（#333）
- 添加了 transition 属性，使颜色变化更平滑
- 悬停时颜色变为蓝色
3. 可应用于多种元素
不只是段落，标题、链接、按钮等任何包含文字的元素都可以使用此方法。
h2:hover {
color: purple;
}
.button:hover {
color: orange;
}
只要选对目标元素，就能控制其文字颜色的变化。
4. 小技巧：配合其他样式增强效果
除了改颜色，还可以同时改变文字粗细、下划线等，提升视觉反馈。
.link-text {
color: #007acc;
text-decoration: none;
transition: all 0.3s;
}
.link-text:hover {
color: #ff6b6b;
text-decoration: underline;
font-weight: bold;
}
这样用户能更清楚地感知到当前正悬停在可交互元素上。
基本上就这些。用 :hover 控制 color 是CSS中最基础也最实用的效果之一，掌握它能让你的页面更具互动性。不复杂但容易忽略细节，比如加上过渡动画会让体验更好。
