hover的延時策略
hover 是 web 交互里的一個重要交互動作裆悄，當鼠標指針懸停或者劃過元素的上方時抵栈，會觸發(fā)對應(yīng)的反饋，或者展示隱藏的信息坤次。
但是在實際的設(shè)計過程中古劲，hover 觸發(fā)的東西并不是即時的。
如圖缰猴，京東頻道頁中绢慢，左側(cè)的商品導(dǎo)航是收起的。但是洛波，當鼠標劃過收起的區(qū)域時胰舆，它并不會馬上展開導(dǎo)航。實際上你要在那里懸停0.3s左右蹬挤，它才會展開缚窿。這樣的目的是，防止當用戶要點擊京東 logo 時焰扳，劃過這塊區(qū)域倦零，觸發(fā)展開導(dǎo)航误续，造成視覺上的干擾。
實際上扫茅，使用電腦看網(wǎng)頁時蹋嵌，大部分人都沒有注意到，我們的鼠標指針并不“老實”：有時候葫隙，它會隨著我們的視線栽烂，不由自主的移動。這個時候恋脚，就有可能 hover 到某些元素腺办，觸發(fā)某個行為。但是糟描，這個行為并不一定是我們期望的行為怀喉，就比如上述京東的例子。所以船响，設(shè)計中采取 hover 延時的策略躬拢，減少這種“擾動”的發(fā)生概率。而當用戶的目標就是hover 觸發(fā)某個東西時见间，也不會造成太大的影響估灿。
這里我們來看一個，我認為應(yīng)該算反例的案例：
百度糯米的頻道頁中缤剧，同樣的導(dǎo)航收起區(qū)域馅袁，并沒有對hover進行延時處理， 反而荒辕，在劃過時有很“強”的反饋效果汗销。下圖中可以看出，hover 這塊區(qū)域時抵窒，導(dǎo)航欄的寬度變寬了……個人認為弛针，這是一個很嚴重的干擾；
體驗地址：百度糯米頻道頁
還是左側(cè)導(dǎo)航
電商網(wǎng)站中李皇，使用左側(cè)的商品導(dǎo)航時削茁，hover 一級導(dǎo)航觸發(fā)二級導(dǎo)航，也設(shè)置了延時掉房。目的是為了保證茧跋，光標在移動到二級導(dǎo)航的過程中，不會誤觸發(fā)其他一級導(dǎo)航卓囚，從而導(dǎo)致當前的二級導(dǎo)航被切換瘾杭。
這里的本質(zhì)原因是，我們的鼠標光標在移動到二級導(dǎo)航過程中哪亿，它移動軌跡是在一個三角形里（如下圖）
如果不設(shè)置這個延時粥烁，那么光標在靠近這個三角形的邊緣時贤笆，就會導(dǎo)致當前的二級導(dǎo)航被關(guān)閉（如下圖）
這里有篇文章，對這種延時機制和對應(yīng)的優(yōu)化策略讨阻，有較為詳細的解釋芥永；
揭秘Amazon反應(yīng)速度超快的下拉菜單
