使用:hover伪类可实现鼠标悬停时改变文字或背景颜色，如链接悬停变蓝、按钮背景变色并配以过渡效果，提升交互体验。
在CSS中，想要设置元素的hover状态颜色，比如鼠标悬停时改变背景色或文字颜色，可以通过 :hover 伪类来实现。这个方法简单直接，适用于按钮、链接、卡片等各种交互元素。
使用 :hover 伪类修改文字颜色
当用户将鼠标移到元素上时，可以通过设置 color 属性来改变文字颜色。
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #007acc;
}
上面的例子中，链接默认是深灰色，鼠标悬停时变为蓝色，提升可点击性的视觉反馈。
使用 :hover 修改背景颜色
除了文字颜色，常用于按钮或区域块的背景色也可以通过 hover 来动态调整。
立即学习“前端免费学习笔记（深入）”；
.button {
background-color: #f0f0f0;
padding: 10px 20px;
border: 1px solid #ccc;
display: inline-block;
}
.button:hover {
background-color: #007acc;
color: white;
}
这里不仅改变了背景为蓝色，也同步调整了文字颜色为白色，确保内容清晰可见。
同时调整多个样式属性
在 hover 状态下，可以一次性定义多个样式变化，比如边框、阴影、过渡动画等，让效果更自然。
.card {
background-color: white;
border: 1px solid #ddd;
padding: 16px;
transition: all 0.3s ease;
}
.card:hover {
background-color: #f9f9f9;
border-color: #aaa;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
color: #222;
}
加入 transition 可以让颜色变化更平滑，提升用户体验。
基本上就这些。利用 :hover 配合 color 和 background-color，再加点过渡效果，就能做出直观又美观的悬停交互。不复杂但容易忽略细节，比如对比度和可访问性，记得测试不同背景下的文字是否清晰可读。
