当前位置 - 股票行情交易網 - 財經新聞 - 關於鼠標懸停事件的七種用法

關於鼠標懸停事件的七種用法

最近寫網頁前端的過程中,發現會經常用到偽類的使用,如:link,:visited,:hover,:active,:disabled等。其中:link通常表示未點擊鏈接的狀態,:visited則為已點擊的狀態,:hover為鼠標懸停,:active為鼠標按下到放開時鏈接或按鈕的狀態,:disabled常用於表示元素不可用時的狀態。其中數鼠標懸停交互(hover/onmouseover)的方式的運用最為多樣化,當css不能滿足懸停事件的時候常常借助js來實現。在開發人員和設計師的腦洞下鼠標懸停事件可以有多種多樣的表現形式。從交互作用上總結起來大致有以下幾類:

1.最常見的是用在可點擊元素或者網頁鏈接上,常見為網址鼠標懸停顯示下劃線、按鈕/圖標懸停改變顏色等狀態,若是material design風格會常將鼠標選中的卡片加重陰影,使卡片有上浮的感覺。

有些圖標的鼠標懸浮會出現tips來提示按鈕的含義或者作用。將用戶的鼠標移動行為即時反饋,以提示人們選中了可點擊的元素或者超鏈接,可以進行點擊了。

2.用於導航中顯示二級菜單/分類詳情,其中選中的壹級菜單鏈接可以直接點擊顯示,也可選中二級菜單進入更詳細的分類頁面。

需要註意的是,當導航中的每個選項都有二級菜單並且為鼠標懸停顯示的時候,二級菜單的彈出有壹定的時間延遲會好壹些,原因是如果鼠標懸停立刻顯示的話,當鼠標沿著導航欄劃過的時候二級菜單的顯示會使人眼花繚亂,增加用戶煩躁感;而若延遲出現二級菜單則可以在用戶在某選項短暫停留後(用戶對此選項可能有興趣,想點擊)再出現,可在相關選項聚焦其註意力。

3.顯示隱藏的按鈕/圖標。

當某些按鈕:(1)不是那麽重要、(2)不希望按鈕太吸引用戶視線、(3)每個同類圖片或模塊都有相同操作的按鈕時,則可在用戶對某板塊感興趣而將鼠標移入的時候顯示該按鈕。例如facebook裏的廣告,關閉按鈕只在鼠標懸停在廣告內容上才出現,相比於沒有關閉按鈕的貼片廣告而言增加了用戶的控制感,相比於關閉按鈕默認壹直顯示的貼片廣告而言可使用戶在關閉前增強用戶對廣告的關註度,有益於廣告的轉化率(若關閉按鈕壹直顯示則用戶的註意力大部分會在關閉按鈕上急著想關閉而容易忽視廣告本身的內容。)

4.通過隱藏或弱化其它元素或者突出選中元素來聚焦用戶的視線。可以在當前頁面內更好地展示產品。

5.通過圖片遮罩或者在選中的元素周圍彈出新浮層來顯示相關元素的額外/更詳細的信息。使用戶不需要跳轉頁面就可以獲得更多的相關信息。

6.鼠標懸停自動播放gif,在這裏鼠標懸停是壹個時機,懸停在gif圖片上圖片才變成動圖播放,而不是壹開始就不停地播放動圖,使人眼花繚亂(這和視頻很少設置為自動播放的道理是相同的)。

7.顯示可切換選項,如在視頻中可即時切換聲音狀態或者畫質狀態。

以上只是整理了鼠標懸停事件的幾種用法,這些用法有優點也有缺點,網頁元素應該根據自身特點選擇是否采用鼠標懸停觸發事件。歡迎批評指正。(手動笑臉)