滑鼠懸停 Hover — Vibe 詞典

你可能會這樣說

滑鼠移過去的時候，按鈕變色、字加底線——那個效果叫什麼？我想全站都加。

白話解釋

懸停是滑鼠指標停在東西上時觸發的狀態：按鈕變深、連結出現底線、卡片浮起來。它在告訴你兩件事：這裡有東西可以互動，以及你正要按的就是它。

懸停效果的原則是「回應，而不是表演」：顏色深一階、移動兩三像素、底線劃出來——這是回應。旋轉、彈跳、放大兩倍——這是表演，看兩次就膩了。

有個一定要知道的限制：手機沒有滑鼠。指尖碰到的瞬間就是「點擊」，沒有懸停這個前奏。所以懸停效果只能是加分題，同一個資訊不能只靠懸停呈現（例如重要說明只在滑鼠移上去才出現——手機使用者永遠看不到）。

親手試試

變深＋上浮 2px

這是一個連結底線劃出來

卡片浮起、陰影加深

王

頭像加外框

再試一件事：用 Tab 鍵在這幾個元素之間移動——藍色外框是「聚焦」狀態，服務鍵盤使用者，跟 hover 一樣是禮貌，不要拿掉。手機上則沒有 hover 這回事。

圖 4-1　把滑鼠移到各個元素上（按住不放也可以），感受「回應」的力道。

別搞混

懸停、聚焦、作用中是三種不同的「狀態」，服務不同的人。

懸停 Hover

滑鼠移上去的狀態。服務「正在滑鼠上的人」，預告可互動。鍵盤使用者和手機使用者完全碰不到它。

聚焦 Focus

用 Tab 鍵走到這個元件時的狀態（常見一圈外框）。服務鍵盤使用者。跟懸停同樣重要的禮貌，卻最常被做成 outline: none 拿掉。

作用中 Active

按住的瞬間的狀態：按鈕按下去凹一下。服務回饋感——「我有按到」。像電梯按鈕按下的手感。

這樣對 AI 說

中文就可以

請幫全站的互動元素加上懸停（hover）效果，力道要克制：

1. 主要按鈕：背景色深一階，往上浮 2px 左右。
2. 內文連結：底線從左到右劃出來（或顏色變化），不要閃來閃去。
3. 卡片：邊框變色、陰影加深，不要旋轉或放大超過 3%。
4. 所有效果時間 0.15 秒左右，用 ease-out。
5. 同時幫鍵盤使用者補上聚焦（focus）樣式：明顯的外框，不要拿掉。
6. 手機上這些效果自動不存在也沒關係——但資訊不能只靠 hover 才看得到，請檢查有沒有這種狀況。

把「力道克制」「focus 也要有」「資訊不能只靠 hover」三句寫進去，動畫就不會俗豔起來。

延伸閱讀

同一課的其他詞

聚焦Focus State 作用中Active State 停用Disabled State 拖曳Drag 游標樣式Cursor Style 選取反白Text Selection

「你可能會這樣說