Background Fade (背景色淡变)

一层半透明叠加层为元素染上颜色，表示指针正悬停其上。

在[应用位置]添加“悬停状态层”(Hover State Layer)，也叫 hover state、state layer 或 hover overlay。
指针悬停时，一层使用内容颜色的淡淡半透明叠加层迅速淡入覆盖元素，指针离开后淡出。
保持足够淡，不影响对比度；聚焦和按下状态也使用同样的状态层做法。

悬停时，边框颜色淡入或渐变为新颜色。

在[应用位置]添加“边框淡变”(Border Fade)悬停效果。
指针停在元素上时，边框从柔和的颜色平滑淡变为强调色：含蓄，不带位移或尺寸变化。
两种状态下的边框宽度保持一致，避免任何错位，键盘焦点时也显示同样的效果。

悬停时，彩色背景从一侧边缘扫过整个元素。

在[应用位置]添加“背景扫入”(Background Sweep)悬停效果，也叫背景填充(background fill)或滑动填充(slide fill)。
新的背景色从左侧边缘扫到右侧，平滑、快速、没有回弹，指针移开时以同样方式退回，同时文字颜色随之切换以保持可读。
让填充始终裁切在元素的形状之内，键盘焦点时也显示同样的效果。

悬停时填充背景消失，只留下描边按钮。

在[应用位置]添加“镂空”(Hollow)悬停效果，也叫 ghost fill。
填充背景淡出，只留下描边，文字颜色随之切换，在空背景上依然清晰可读：顺滑而迅速。
两种状态下边框粗细保持一致，避免元素尺寸变化；键盘聚焦时也显示同样的效果。

悬停期间，元素先向上浮起，然后持续上下轻轻浮动。

在[应用位置]添加“上下浮动”(Bob)悬停效果，也叫悬挂(hang)。
元素先轻轻浮起，指针停留期间持续柔和地上下浮动，指针移开后再落回原位：缓慢而柔和。
只在悬停期间循环浮动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。