最近寫網(wǎng)頁前端的過程中，發(fā)現(xiàn)會(huì)經(jīng)常用到偽類的使用，如:link,:visited,:hover,:active,:disabled等。其中:link通常表示未點(diǎn)擊鏈接的狀態(tài)，:visited則為已點(diǎn)擊的狀態(tài)，:hover為鼠標(biāo)懸停，：active為鼠標(biāo)按下到放開時(shí)鏈接或按鈕的狀態(tài)，:disabled常用于表示元素不可用時(shí)的狀態(tài)。其中數(shù)鼠標(biāo)懸停交互（hover/onmouseover）的方式的運(yùn)用最為多樣化，當(dāng)css不能滿足懸停事件的時(shí)候常常借助js來實(shí)現(xiàn)。在開發(fā)人員和設(shè)計(jì)師的腦洞下鼠標(biāo)懸停事件可以有多種多樣的表現(xiàn)形式。從交互作用上總結(jié)起來大致有以下幾類：
1.最常見的是用在可點(diǎn)擊元素或者網(wǎng)頁鏈接上，常見為網(wǎng)址鼠標(biāo)懸停顯示下劃線、按鈕/圖標(biāo)懸停改變顏色等狀態(tài)，若是material design風(fēng)格會(huì)常將鼠標(biāo)選中的卡片加重陰影，使卡片有上浮的感覺。
有些圖標(biāo)的鼠標(biāo)懸浮會(huì)出現(xiàn)tips來提示按鈕的含義或者作用。將用戶的鼠標(biāo)移動(dòng)行為即時(shí)反饋，以提示人們選中了可點(diǎn)擊的元素或者超鏈接，可以進(jìn)行點(diǎn)擊了。
2.用于導(dǎo)航中顯示二級菜單/分類詳情，其中選中的一級菜單鏈接可以直接點(diǎn)擊顯示，也可選中二級菜單進(jìn)入更詳細(xì)的分類頁面。
需要注意的是，當(dāng)導(dǎo)航中的每個(gè)選項(xiàng)都有二級菜單并且為鼠標(biāo)懸停顯示的時(shí)候，二級菜單的彈出有一定的時(shí)間延遲會(huì)好一些，原因是如果鼠標(biāo)懸停立刻顯示的話，當(dāng)鼠標(biāo)沿著導(dǎo)航欄劃過的時(shí)候二級菜單的顯示會(huì)使人眼花繚亂，增加用戶煩躁感；而若延遲出現(xiàn)二級菜單則可以在用戶在某選項(xiàng)短暫停留后（用戶對此選項(xiàng)可能有興趣，想點(diǎn)擊）再出現(xiàn)，可在相關(guān)選項(xiàng)聚焦其注意力。
3.顯示隱藏的按鈕/圖標(biāo)。
當(dāng)某些按鈕：（1）不是那么重要、（2）不希望按鈕太吸引用戶視線、（3）每個(gè)同類圖片或模塊都有相同操作的按鈕時(shí)，則可在用戶對某板塊感興趣而將鼠標(biāo)移入的時(shí)候顯示該按鈕。例如facebook里的廣告，關(guān)閉按鈕只在鼠標(biāo)懸停在廣告內(nèi)容上才出現(xiàn)，相比于沒有關(guān)閉按鈕的貼片廣告而言增加了用戶的控制感，相比于關(guān)閉按鈕默認(rèn)一直顯示的貼片廣告而言可使用戶在關(guān)閉前增強(qiáng)用戶對廣告的關(guān)注度，有益于廣告的轉(zhuǎn)化率（若關(guān)閉按鈕一直顯示則用戶的注意力大部分會(huì)在關(guān)閉按鈕上急著想關(guān)閉而容易忽視廣告本身的內(nèi)容。）
4.通過隱藏或弱化其它元素或者突出選中元素來聚焦用戶的視線?？梢栽诋?dāng)前頁面內(nèi)更好地展示產(chǎn)品。
5.通過圖片遮罩或者在選中的元素周圍彈出新浮層來顯示相關(guān)元素的額外/更詳細(xì)的信息。使用戶不需要跳轉(zhuǎn)頁面就可以獲得更多的相關(guān)信息。
6.鼠標(biāo)懸停自動(dòng)播放gif，在這里鼠標(biāo)懸停是一個(gè)時(shí)機(jī)，懸停在gif圖片上圖片才變成動(dòng)圖播放，而不是一開始就不停地播放動(dòng)圖，使人眼花繚亂（這和視頻很少設(shè)置為自動(dòng)播放的道理是相同的）。
7.顯示可切換選項(xiàng)，如在視頻中可即時(shí)切換聲音狀態(tài)或者畫質(zhì)狀態(tài)。
以上只是整理了鼠標(biāo)懸停事件的幾種用法，這些用法有優(yōu)點(diǎn)也有缺點(diǎn)，網(wǎng)頁元素應(yīng)該根據(jù)自身特點(diǎn)選擇是否采用鼠標(biāo)懸停觸發(fā)事件。歡迎批評指正。（手動(dòng)笑臉）
