Hover

彩色背景從一側掃入，帶有彈性的輕微過衝。

在[套用位置]加入「背景彈性掃過」(Background Bounce Sweep) 懸停效果。
新的背景色從一側掃入，帶著彈性稍微越過另一側邊緣後再回穩，同時文字顏色跟著切換以維持可讀性；游標移開時平順地滑出。
讓文字始終位於填色之上，鍵盤焦點時也呈現同樣的效果。

懸停時，背景色和文字顏色交叉漸變為新的顏色。

在[套用位置]加入「背景色漸變」(Background Fade) 懸停效果，也叫顏色漸變 (color fade)。
游標停在元素上時，背景色和文字顏色平順地交叉漸變為新顏色，移開後再漸變回來：沉穩，不帶任何位移。
兩種狀態下都要讓文字和背景保有足夠的對比，鍵盤焦點時也呈現同樣的效果。

懸停時，彩色背景從一側邊緣掃過整個元素。

在[套用位置]加入「背景掃過」(Background Sweep) 懸停效果，也叫背景填充 (background fill) 或滑動填充 (slide fill)。
新的背景色從左側邊緣掃到右側，平順、快速、不回彈，游標移開時以同樣方式退回，同時文字顏色跟著切換以維持可讀性。
讓填色始終裁切在元素的形狀之內，鍵盤焦點時也呈現同樣的效果。

懸停期間，元素先向上浮起，然後持續上下輕輕浮動。

在[套用位置]加入「上下浮動」(Bob) 懸停效果，也叫懸掛 (hang)。
元素先輕輕浮起，游標停留期間持續柔和地上下浮動，游標移開後再落回原位：緩慢而柔和。
只在懸停期間循環浮動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

懸停時，邊框顏色淡入或漸變為新顏色。

在[套用位置]加入「邊框色漸變」(Border Fade) 懸停效果。
游標停在元素上時，邊框從柔和的顏色平順漸變為強調色：含蓄，不帶位移或尺寸變化。
兩種狀態下的邊框粗細保持一致，避免任何位移，鍵盤焦點時也呈現同樣的效果。

懸停時，同心的邊框圓環從元素向外擴散或向內收縮。

在[套用位置]加入「邊框漣漪」(Border Ripple) 懸停效果。
游標移入時，幾道邊框圓環依序從元素向外擴散並淡出：快速輕盈，像漣漪一樣。
每次懸停只播放一次、不要循環，也不要讓圓環推擠周圍的版面。

懸停開始或結束時，元素帶著彈性過衝進行縮放。

在[套用位置]加入「彈性縮放」(Bounce Scale) 懸停效果，也叫彈入/彈出 (bounce in / out)。
元素帶著明顯的彈性稍微放大，短暫超過最終尺寸後再回穩；游標移開時以同樣的彈性縮回。
不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

高亮背景在網格中的卡片之間滑動，跟著目前懸停的卡片移動。

在[套用位置]加入「卡片懸停效果」(Card Hover Effect)，也叫滑動高亮卡片網格 (sliding highlight card grid)。
柔和的高亮背景出現在懸停卡片的後方，游標移到哪張卡片就平順地滑到哪裡，游標離開網格時淡出。
鍵盤焦點也要以同樣方式移動高亮，卡片本身保持不動。

柔和的放射狀光線跟著游標在卡片表面移動，照亮下方的背景。

在[套用位置]加入「卡片聚光燈」(Card Spotlight) 效果，也叫聚光懸停 (spotlight hover)、游標光暈 (pointer glow)、跟隨滑鼠的光暈 (mouse-following glow) 或放射狀漸層懸停 (radial gradient hover)。
柔和、淡淡的放射狀光暈跟著游標在卡片表面移動，游標移入時淡入，移出時淡出。
光暈放在卡片內容的後面，讓文字保持清楚易讀；在觸控裝置上則不顯示光暈。

懸停時，元素的一角像翻頁一樣捲起。

在[套用位置]加入「頁角捲起」(Curl) 懸停效果，也叫翻頁捲角 (page curl)。
元素的一角像翻頁一樣平順地捲起，露出摺角的背面，游標移開後再恢復平整。
摺角要小，不要遮住重要內容，鍵盤焦點時也呈現同樣的效果。

遮罩層從游標進入的一側滑入，並朝游標離開的一側滑出。

在[套用位置]加入「方向感知懸停」(Direction Aware Hover) 效果，也叫方向感知遮罩 (direction-aware overlay)。
遮罩層從游標進入的那一側滑入，再朝游標離開的那一側滑出：快速、流暢。
依據游標進入和離開時的位置判斷方向；觸控或鍵盤焦點時則統一使用一個預設方向。

游標靠近時，一排圖示平順放大，就像 macOS 的 Dock。

在[套用位置]加入「Dock 放大」(Dock Magnification) 效果，也叫 Dock (dock)。
游標越靠近，這一排圖示就平順地放大，最近的圖示最大、相鄰的圖示稍微放大；游標移開後全部恢復原本大小。
圖示從固定的基準線向上放大；在觸控和鍵盤操作時，每個圖示都要以正常大小正常可用。

懸停時，元素向上浮起幾個像素，彷彿飄浮起來。

在[套用位置]加入「浮起」(Float) 懸停效果，也叫抬升 (lift) 或升起 (raise)。
游標停在元素上時，元素輕輕向上浮起並維持，游標移開後再落回：平順柔和，沒有回彈。
只做視覺上的移動，不要推擠周圍的版面，鍵盤焦點時也呈現同樣的效果。

懸停的卡片保持清晰，其餘卡片變得模糊、變暗。

在[套用位置]加入「聚焦卡片」(Focus Cards) 效果，也叫懸停時模糊其他卡片 (blur siblings on hover)、懸停聚焦模糊 (hover focus blur) 或卡片懸停效果 (card hover effect)。
游標停在某張卡片上時，其他卡片變模糊、變暗並略微縮小，懸停的卡片保持清晰；整個過程平順過渡，游標移開後恢復原狀。
鍵盤焦點時也採用同樣的聚焦效果；沒有懸停任何卡片時，所有卡片都保持清楚易讀。

懸停時，元素周圍出現一圈彩色光暈。

在[套用位置]加入「發光」(Glow) 懸停效果，也叫霓虹光暈 (neon glow)。
游標停在元素上時，元素周圍淡入一圈柔和的彩色光暈，移開後淡出：柔和，不帶位移。
光暈不要影響版面，鍵盤焦點時也呈現同樣的效果。

游標停在元素上時，元素平順地略微放大。

在[套用位置]加入「放大」(Grow) 懸停效果，也叫放大縮放 (scale up)。
游標停在元素上時，元素平順地略微放大，移開後恢復原本大小：快速而含蓄。
不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

游標懸停時填滿的背景消失，只留下外框按鈕。

在[套用位置]加入「空心化」(Hollow) 懸停效果，也叫 ghost fill。
填滿的背景淡出，只留下外框，文字顏色隨之切換，在空背景上依然清楚易讀：流暢而快速。
兩種狀態的邊框粗細保持一致，避免元素尺寸改變；鍵盤聚焦時也顯示同樣的效果。

漸層邊框沿著元素四周流動，游標懸停時向外擴展。

在[套用位置]加入「懸停漸層邊框」(Hover Border Gradient) 效果。
一小段漸層亮光停在邊框的某一處；游標懸停時，它沿著邊框等速環繞，同時整圈邊框帶著柔和光暈變亮。
只在懸停時讓邊框動起來；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

游標懸停時元素下方出現或加深一層柔和陰影，營造浮起的感覺。

在[套用位置]加入「懸停陰影」(Hover Shadow) 效果，也叫 drop shadow on hover 或 elevation on hover。
游標懸停時，元素下方的柔和陰影加深並擴散，讓它看起來浮起；游標移開後再淡回原樣，元素本身保持不動。
陰影要夠含蓄，在淺色和深色主題下都合適；鍵盤聚焦時也顯示同樣的效果。

一層半透明覆蓋層替元素染上顏色，表示游標正停在上面。

在[套用位置]加入「懸停狀態層」(Hover State Layer)，也叫 hover state、state layer 或 hover overlay。
游標懸停時，一層使用內容顏色的淡淡半透明覆蓋層快速淡入蓋住元素，游標移開後淡出。
保持夠淡，不影響對比度；聚焦和按下狀態也使用同樣的狀態層做法。

游標懸停時圖示往下掉出視線範圍，再從上方落回。

在[套用位置]加入「圖示下落」(Icon Drop) 懸停效果。
元素內的圖示往下掉出視線範圍，再從上方落回原位：快速，落地輕柔。
每次游標移入只播放一次，不要循環；標籤和按鈕尺寸保持不變。

圖示飄出按鈕並淡出，同時新圖示飄進來。

在[套用位置]加入「圖示浮離」(Icon Float Away) 懸停效果。
目前的圖示往上飄走並淡出，同時新圖示從下方浮上來補位，過渡流暢；游標移開時反向切換回來。
切換過程中按鈕尺寸保持固定；鍵盤聚焦時也顯示同樣的效果。

游標懸停在按鈕上時，按鈕內的圖示轉動一圈。

在[套用位置]加入「圖示旋轉」(Icon Spin) 懸停效果。
游標移入時，元素內的圖示流暢地轉一整圈；游標移開時再轉回去。
只旋轉圖示，不旋轉整個按鈕；鍵盤聚焦時也顯示同樣的效果。

游標懸停時按鈕文字滑出，箭頭和填色隨之展開。

在[套用位置]加入「懸停互動按鈕」(Interactive Hover Button) 效果。
文字旁的小圓點放大到填滿按鈕，同時文字往一側滑出並淡出，帶箭頭的文字再從新的填色上滑入：流暢而快速。
按鈕尺寸保持固定，文字全程清楚易讀；鍵盤聚焦時也顯示同樣的效果。

游標懸停時箭頭或元素本身往前或往後滑動幾個像素。

在[套用位置]加入「前後輕推」(Nudge Forward / Backward) 懸停效果，也叫 arrow nudge。
游標懸停時，箭頭朝它指的方向輕輕滑動一小段，游標移開後滑回：快速、幅度小。
只移動箭頭，不要讓文字或版面跟著位移；鍵盤聚焦時也顯示同樣的效果。

游標懸停時外框線從元素往外擴張，或往元素收縮。

在[套用位置]加入「外框擴張」(Outline Expand) 懸停效果。
外框線一開始緊貼元素邊緣，接著往外擴張，在四周留出一小圈間隙，懸停期間維持不變，游標移開後再收回：流暢而快速。
繪製外框時不要改變元素尺寸，也不要推擠周圍內容；鍵盤聚焦時也顯示同樣的效果。

游標懸停時文字上方出現一條線，從左側、中間或右側延伸開來。

在[套用位置]加入「上邊線延伸」(Overline Grow) 懸停效果。
游標懸停時，文字上方的線從中間往兩側延伸，游標移開後再縮回中間：快速而流暢。
預留線條的空間，避免文字位移；鍵盤聚焦時也顯示同樣的效果。

元素快速放大，再帶著彈性「啵」地回到原樣。

在[套用位置]加入「輕彈」(Pop) 懸停效果。
每次游標移入時，元素快速鼓起一次再回到正常大小，像一次帶彈性的輕快彈跳。
每次懸停只播放一次，不要停在放大狀態，也不要循環；避免周圍版面位移。

元素往內一沉再彈回，彷彿按下了一顆實體按鈕。

在[套用位置]加入「按壓」(Push) 懸停效果。
每次游標移入時，元素快速縮小一次再彈回正常大小，就像按下一顆實體按鈕。
每次懸停只播放一次，不要循環；避免周圍版面位移。

游標懸停時一個彩色圓形從中心放大或往中心收縮，填滿元素。

在[套用位置]加入「圓形填充」(Radial Fill) 懸停效果，也叫 circle expand。
新顏色的圓形從中心流暢地放大到填滿元素，游標移開後再縮回中心，同時文字顏色隨之切換，保持清楚易讀。
圓形要裁切在元素形狀之內，文字位在它上方；鍵盤聚焦時也顯示同樣的效果。

游標懸停時元素內部的矩形放大或收縮，藉此切換背景。

在[套用位置]加入「矩形填充」(Rectangle Fill) 懸停效果。
隨著內部矩形往中心收縮，新背景色從四邊往內合攏；游標移開後再重新打開，同時文字顏色隨之切換，保持清楚易讀：流暢而快速。
文字始終位在填充層上方；鍵盤聚焦時也顯示同樣的效果。

游標懸停時元素旋轉幾度。

在[套用位置]加入「旋轉」(Rotate) 懸停效果。
游標懸停時，元素順時針輕微轉動，游標移開後轉回：流暢而含蓄。
避免周圍版面位移；鍵盤聚焦時也顯示同樣的效果。

懸停時，元素的直角平順地變成圓角。

在[套用位置]加入「圓角化」(Round Corners) 懸停效果。
游標停在元素上時，元素的直角平順地變圓，移開後再恢復成直角：柔和而快速。
保持元素尺寸不變，鍵盤焦點時也呈現同樣的效果。

懸停時，一道斜向光帶從元素的一側掃到另一側。

在[套用位置]加入「光澤掃過」(Shine Sweep) 懸停效果，也叫光澤 (sheen)、閃亮按鈕 (shiny button)、懸停掃光 (shine on hover)、閃光 (glint)、微光 (shimmer) 或微光按鈕 (shimmer button)。
游標停在元素上時，一道柔和的斜向光帶從左往右掃過元素，並在短暫停頓後重複。
光帶要裁切在元素內部，游標移開後停止；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不要播放。

游標停在元素上時，元素平順地略微縮小。

在[套用位置]加入「縮小」(Shrink) 懸停效果，也叫縮小 (scale down)。
游標停在元素上時，元素平順地略微縮小，移開後恢復原本大小：快速而含蓄。
不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

懸停時，背景像百葉窗一樣從中間或兩側展開或合攏。

在[套用位置]加入「百葉窗填充」(Shutter Fill) 懸停效果，也叫百葉窗 (shutter)。
新的背景色從中間一條直線像百葉窗一樣向兩側展開，游標移開後再往中間合攏，同時文字顏色跟著切換以保持清楚易讀：流暢而快速。
填色要裁切在元素內部，文字保持在上方，鍵盤焦點時也呈現同樣的效果。

懸停時，元素向下移動幾個像素，彷彿被按進頁面裡。

在[套用位置]加入「下沉」(Sink) 懸停效果。
游標停在元素上時，元素略微下移並停住，彷彿被按進頁面裡，移開後再升回原位：平順，沒有回彈。
只在視覺上移動，不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

懸停時，元素向一側斜切變形。

在[套用位置]加入「斜切」(Skew) 懸停效果。
游標停在元素上時，元素向一側斜切成輕微傾斜的樣子，移開後恢復端正：快速而流暢。
傾斜時文字仍要清楚易讀，不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

懸停時，元素一側出現一個對話泡泡的小三角。

在[套用位置]加入「對話泡泡」(Speech Bubble) 懸停效果，也叫泡泡 (bubble)。
一個小三角尾巴從元素一側的後方滑出，讓元素變成對話泡泡的形狀，游標移開後再滑回去：快速而流暢。
尾巴要和元素同色，看起來是一個整體，鍵盤焦點時也呈現同樣的效果。

懸停時，元素邊緣內側出現一條內框線。

在[套用位置]加入「內框線」(Trim) 懸停效果。
游標停在元素上時，一條細線在元素邊緣內側淡入，移開後淡出：含蓄，不帶位移。
線條要放在元素內部，保持元素尺寸不變，鍵盤焦點時也呈現同樣的效果。

一條線從底邊或頂邊滑入定位，為元素加上底線或頂線。

在[套用位置]加入「底線顯現」(Underline Reveal) 懸停效果，也叫頂線顯現 (overline reveal) 或顯現 (reveal)。
游標停在元素上時，一條滿版寬度的線從底邊正下方往上滑入定位，移開後再往下滑出視線：快速而流暢。
在邊緣處裁切線條，讓它以滑入而不是淡入或伸長的方式出現，鍵盤焦點時也呈現同樣的效果。

游標在卡片上移動時，卡片隨之輕微平移和縮放。

在[套用位置]加入「搖晃卡片」(Wobble Card) 效果。
游標在卡片上移動時，卡片朝游標方向輕微平移，內容則朝反方向輕微平移並略微放大，平順地跟隨；游標移開後一切回到原位。
保持幅度很小；在觸控裝置上關閉，如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，也要關閉。