:hover伪类实现鼠标悬停交互，支持样式变化与transition平滑过渡，可控制子元素或相邻元素，但移动端支持有限，关键信息不可依赖:hover。
用 :hover 伪类就能实现鼠标移入才显示样式，这是 CSS 中最基础也最常用的交互控制方式。
基本写法：直接在目标元素上添加 :hover
只需在选择器后加上 :hover，再定义需要的样式即可。浏览器会自动在鼠标悬停时应用这些样式，移出时恢复原样。
- 例如让按钮文字变红、加下划线：
button:hover { color: red; text-decoration: underline; } - 支持修改颜色、背景、边框、尺寸、透明度、阴影等几乎所有可动画属性
- 注意：
:hover只对鼠标设备生效；触屏设备（如手机）通常不触发，除非配合touchstart等 JS 补充
常用组合：配合 transition 实现平滑过渡
单独用 :hover 是即时切换，加上 transition 可让变化更自然。
- 在原始状态（非 hover）中定义过渡效果：
a { color: #333; transition: color 0.3s ease, transform 0.2s; }a:hover { color: #007bff; transform: scale(1.05); } - 推荐为所有要动的属性单独写
transition，避免用all导致意外动画 - 过渡时间建议 0.2s–0.4s，太短不易察觉，太长显得迟滞
进阶技巧：控制子元素或相邻元素响应
:hover 可以作用于父容器，从而影响其内部或后续元素，无需 JS 就能实现复杂交互。
立即学习“前端免费学习笔记（深入）”；
- 显示隐藏的子菜单：
.nav-item:hover .dropdown-menu { display: block; } - 相邻兄弟元素联动（如图标随文字悬停变色）：
.card-title:hover + .card-icon { opacity: 1; } - 注意：CSS 无法“反向选择”（比如不能写
div:hover:not(.active)来排除某类），逻辑需正向设计
兼容性与注意事项
:hover 在所有现代浏览器中都完全支持，包括 IE9+。但有些场景需特别留意：
- 移动端 Safari 和 Chrome 对
:hover支持有限——首次点击后才激活，且可能残留 hover 状态 - 不要依赖
:hover呈现关键信息（比如重要提示、操作入口），它不是可靠的操作触发方式 - 可搭配
@media (hover: hover)媒体查询做设备判断，区分有无悬停能力的设备
