:hover伪类用于定义鼠标悬停时的样式，通过.button:hover设置背景色和文字颜色变化，并结合transition实现平滑过渡，增强按钮交互体验。
按钮的悬停效果是网页交互中常见且实用的设计，利用CSS伪类 :hover 可以轻松实现鼠标指针移入时改变背景色和文字颜色。这种方式无需JavaScript，仅通过纯CSS即可增强用户体验。
什么是 :hover 伪类？
:hover 是一种CSS伪类，用于选择用户将鼠标指针悬停在元素上的状态。它可以应用于任何HTML元素，但最常用于按钮、链接等可交互元素上，用来提供视觉反馈。
基本语法与用法
使用 :hover 的语法非常简单：在选择器后加上 :hover，然后定义悬停时的样式。
button:hover {
background-color: #0056b3;
color: white;
}
完整示例：按钮悬停变色
下面是一个完整的HTML与CSS结合的例子，展示如何实现按钮在悬停时同时改变背景和文字颜色。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“前端免费学习笔记（深入）”；
<button class="btn">点击我</button>
<style>
.btn {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
background-color: #0056b3;
color: #fff;
}
</style>
说明：
- background-color 在悬停时从蓝色 (#007bff) 变为更深的蓝色 (#0056b3)，增强点击感。
- color 确保文字颜色在悬停时保持清晰可见。
- transition 属性让颜色变化更平滑，提升视觉体验。
注意事项与技巧
为了让悬停效果更友好，注意以下几点：
- 确保悬停前后的颜色对比度足够，保证文字可读性。
- 加入 transition 让样式过渡自然，避免突兀变化。
- 在移动设备上，:hover 的行为可能不一致，建议结合实际测试调整。
基本上就这些，合理使用 :hover 能让按钮更具交互感，提升整体界面的可用性。不复杂但容易忽略细节。
