答案：使用:hover伪类可实现按钮悬停效果，结合transition使背景色、文字颜色、边框、阴影及变换等样式变化更平滑，提升交互体验。
在CSS中使用 :hover 选择器可以轻松实现鼠标悬停时的按钮效果。当用户将鼠标指针移到指定元素上时，:hover 会触发样式变化，让按钮更具交互性和视觉吸引力。
基本语法
:hover 是一个伪类选择器，附加在元素选择器后面，用于定义鼠标悬停状态下的样式。
button:hover {
background-color: #0056b3;
color: white;
transform: scale(1.05);
}
常见悬停效果示例
以下是一些实用且常见的按钮悬停效果实现方式：
- 背景色变化：提升按钮的可点击感
- 文字颜色与边框变化：增强视觉反馈
- 添加阴影：模拟“浮起”效果
- 过渡动画（推荐）：使效果更平滑自然
.btn:hover {
background-color: #007bff;
}
.btn:hover {
color: #fff;
border: 2px solid #0056b3;
}
.btn:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn {
transition: all 0.3s ease;
}
.btn:hover {
background-color: #007bff;
transform: translateY(-2px);
}
完整示例代码
结合HTML与CSS，创建一个带悬停效果的按钮：
立即学习“前端免费学习笔记（深入）”；
.fancy-btn {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #0066cc;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.fancy-btn:hover {
background-color: #0056b3;
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
transform: translateY(-3px);
}
基本上就这些。合理使用 :hover 能显著提升用户体验，只要注意加上 transition 让变化更柔和，避免突兀的样式切换。
