:hover伪类用于鼠标悬停时触发样式，如改变颜色、添加动画、显示隐藏内容及图片效果，需注意触摸设备兼容性与可访问性，配合transition提升交互体验。
在css中，:hover 伪类用于定义当用户将鼠标指针悬停在元素上时的样式，是实现网页交互效果最简单且常用的方式之一。它不需要javaScript，就能让按钮、链接、图片等元素对用户行为做出视觉反馈。
基本语法
:hover 直接添加在选择器后面，表示“当鼠标悬停时应用这些样式”。
a:hover { color: red; }
上面的例子会让链接文字在鼠标悬停时变成红色。
常见交互应用场景
以下是几种典型的使用方式：
立即学习“前端免费学习笔记（深入）”；
1. 改变颜色或背景
button:hover { background-color: #0056b3; color: white; }
常用于按钮，提升可点击感。
2. 添加过渡动画（transition）
.box { width: 100px; height: 100px; background: blue; transition: all 0.3s ease; } .box:hover { transform: scale(1.1); background: green; }
加入 transition 可使变化更平滑，提升用户体验。
3. 显示隐藏内容
.tooltip { display: none; } .trigger:hover .tooltip { display: block; }
例如鼠标悬停时显示提示信息。
4. 图片悬停效果
img:hover { opacity: 0.8; transform: rotate(5deg); }
轻微旋转或变暗，增强视觉吸引力。
注意事项
使用 :hover 时需注意以下几点：
- 在触摸设备上（如手机），:hover 的行为可能不一致或无法触发，不能作为唯一交互手段。
- 避免在非可交互元素（如普通 div）上过度依赖 hover 效果，影响可访问性。
- 配合 focus 状态提升键盘导航体验，确保无障碍兼容。
基本上就这些。合理使用 :hover 能显著提升页面的响应感和用户参与度，关键是保持自然、直观的反馈。不复杂但容易忽略细节。