:hover伪类可实现鼠标悬停效果，需正确选择目标元素并设置样式，必须置于常规样式之后，支持颜色、背景、变换等属性，常配合transition实现平滑过渡，但移动端行为不一致需慎用。
直接用 :hover 伪类就能实现鼠标悬停效果，关键是要选对目标元素，并设置你想改变的样式属性。
基础写法：给元素加悬停状态
语法很简单：选择器:hover { 样式声明 }。浏览器会自动在鼠标移入时应用这些样式，移出时恢复原样。
- 必须写在对应元素的常规样式之后，否则可能被覆盖
- 支持大多数CSS属性，比如颜色、背景、边框、尺寸、透明度、变换等
- 不能用于
或以外的不可见元素（如）
常用效果示例
比如让按钮变色、加阴影、轻微上移，都是很典型的用法：
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
transition: all 0.3s ease; /* 加过渡更自然 */
}
button:hover {
background: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
注意加上 transition 可以让变化更平滑，不然会显得生硬。
立即学习“前端免费学习笔记（深入）”；
链接和文字的悬停处理
超链接默认有下划线和颜色，常通过 a:hover 自定义：
- 去掉下划线：
text-decoration: none; - 改颜色或加底色：
color: #e74c3c;或background: #f8f9fa; - 加下划线动画：
border-bottom: 2px solid #3498db;配合transition
进阶技巧：组合与限制
可以和其他伪类或属性配合使用：
-
a:hover:not(:visited) { color: purple; }—— 只对未访问过的链接生效 -
.nav-item:hover .dropdown-menu { display: block; }—— 悬停父级显示子菜单（需结构支持） - 移动端注意：
:hover在触摸设备上行为不一致，慎用于核心交互
