:hover伪类可直接实现鼠标悬停样式变化，无需JavaScript；支持a、button、div等元素，但旧版IE兼容性有限；需兼顾移动端触摸设备、可访问性及性能优化。
直接用 :hover 伪类就能实现鼠标悬停时的样式变化，无需 JavaScript，简单高效。
基础写法：选中元素后加 :hover
在 CSS 中，给目标选择器后面加上 :hover，即可定义鼠标移入时的样式。浏览器会自动监听 hover 状态并切换样式。
- 语法示例：
a:hover { color: red; text-decoration: underline; } - 支持所有可交互元素（
a、button、div等），但部分旧版 IE 对非链接元素支持有限（IE6 只支持a） - 移动端注意：多数触摸设备不触发 hover（iOS Safari 默认延迟或不触发），需搭配
@media (hover: hover)做兼容判断
常用效果：颜色、背景、尺寸与过渡动画
单独改颜色太单调，配合 transition 可让变化更自然。
- 添加平滑过渡：
transition: all 0.3s ease;（写在默认状态里，hover 中只改属性值） - 按钮悬停放大：
transform: scale(1.05); - 下划线从左滑入：
border-bottom: 2px solid #007bff;+padding-bottom: 2px;，再配合transition - 背景渐变悬停：
background: linear-gradient(45deg, #007bff, #0056b3);→ hover 时换方向或色值
进阶技巧：组合选择器与层级控制
hover 不仅能作用于自身，还能影响子元素、兄弟元素甚至父容器（需配合 HTML 结构）。
立即学习“前端免费学习笔记（深入）”；
- 控制子元素：
.card:hover .card-title { color: #007bff; } - 相邻兄弟元素：
h2 + p:hover { opacity: 1; }（注意是 p 被 hover，不是 h2） - 通用兄弟选择器：
img:hover ~ .caption { display: block; } - 避免过度嵌套：hover 层级建议不超过 3 层，否则维护困难且性能略降
注意事项：可访问性与用户体验
视觉反馈要兼顾键盘用户和屏幕阅读器。
- 确保 :focus 状态样式与 :hover 一致（或至少有明显焦点框），支持 Tab 键导航
- 慎用纯颜色变化：色弱用户可能无法识别，建议叠加图标、粗细、间距等差异
- 避免 hover 触发复杂动画或内容重排（如 height 变化），易造成布局抖动
- 不要依赖 hover 显示关键信息（如重要提示、操作入口），移动端可能完全不可见
