:hover伪类是实现悬浮效果的核心，需配合transition实现平滑动画，注意移动端兼容性、键盘焦点一致性及无障碍支持。
hover 伪类是实现悬浮效果的核心机制
HTML 元素本身没有“悬浮”状态，所有视觉变化都依赖 CSS 的 :hover 伪类触发。它只在鼠标指针位于元素及其子元素上时生效，不适用于触摸设备（除非配合 focus-within 或 JavaScript 模拟）。
常见误区是给父容器加 :hover 却期望子元素动画延迟启动——这时必须显式写明子元素选择器，例如 .card:hover .card-title，而不是仅靠嵌套结构自动继承。
-
:hover不支持过渡到未定义的初始状态（比如从opacity: 0到1，但元素默认不是0，需提前设好） - 不能直接作用于
<link>、<script></script>等非渲染元素 - 在部分旧版 Safari 中，对
transform的:hover过渡可能触发重排而非重绘，影响性能
transition 配合 hover 控制动画节奏
仅用 :hover 只能做即时切换；要实现平滑变化，必须搭配 transition 属性。关键在于指定哪些属性可过渡、持续时间、缓动函数。
不是所有 CSS 属性都支持过渡：比如 display 无法过渡（会跳变），而 opacity、transform、color 是安全选择。
立即学习“前端免费学习笔记（深入）”；
button {
background-color: #007bff;
transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover {
background-color: #0056b3;
transform: translateY(-2px);
}- 多个属性过渡可用逗号分隔，避免写成
transition: all 0.3s（会意外过渡不需要的属性） - 推荐用
transform替代top/left位移，减少重排开销 - 移动端需注意：纯
:hover在 iOS Safari 中首次点击才触发，第二次才真正“悬停”，体验割裂
伪元素 + hover 实现遮罩/图标浮现等进阶效果
很多“悬浮显示图标”“文字高亮遮罩”效果，本质是利用 ::before 或 ::after 在 :hover 下改变 opacity 或 visibility，而非 JS 动态插入 DOM。
注意：伪元素默认不占文档流，且无法响应事件，如需点击交互，得把事件绑定到宿主元素上。
.icon-btn {
position: relative;
overflow: hidden;
}
.icon-btn::after {
content: "→";
position: absolute;
right: 12px;
opacity: 0;
transition: opacity 0.2s;
}
.icon-btn:hover::after {
opacity: 1;
}- 若伪元素含图标字体（如 Font Awesome），确保
font-family和content正确，否则显示为空格或方块 -
visibility: hidden不参与过渡，要用opacity或transform: scale(0)配合transition - 复杂遮罩（如渐变蒙层）建议用
background: linear-gradient()而非多层伪元素叠加
兼容性与无障碍注意事项
悬浮效果在键盘导航（Tab 键）下默认不可见，这对屏幕阅读器用户和键盘操作者不友好。WCAG 要求焦点状态（:focus）必须有清晰视觉反馈，且应与 :hover 效果一致或更强。
同时，prefers-reduced-motion 媒体查询应被尊重，避免强制动画干扰敏感用户。
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.btn {
transition: background-color 0.2s, box-shadow 0.2s;
}
.btn:hover,
.btn:focus {
background-color: #0056b3;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}- 永远同时定义
:hover和:focus，不要只写一个 - 避免用颜色变化作为唯一反馈方式（色盲用户可能无法识别），叠加图标、边框或文字提示更稳妥
- IE11 不支持
transform的某些值（如scaleZ），但基础translate和scale可用
实际项目中最容易被忽略的是键盘焦点样式的一致性，以及对运动敏感用户的降级处理——这两点不加，悬浮效果再炫也属于可访问性缺陷。
