这个小虫的是很常见的交互的虫子，也不影响使用，但是作为大厂，用户体验还是很重要的。话不多说，上图。
正常情况是这样的。
效果很简单，就是鼠标悬停上去会有一个动效，效果就是这个item向上移动一点。在活动页中领取优惠券、大礼包之类是经常用的一种动效。但是这种动效实现不好就会出现非常不好的效果，客气来说，99%的实现都会出现我说的这种缺陷。看官会问，这么简单的动效，就是加个:hover伪类在里面偏移一下（可用定位+top，margin-top，transform实现）就行了啊，还会出问题么。当然，就是因为简单，所以容易忽略。请看在某种临界状态的行为。
看到没，当鼠标的位置位于某个位置时，这个item简直比食堂打菜阿姨的手抖得还厉害。这是什么情况？其实原因很简单，就是设计这个动效的开发想的过于简单。
给这个动效item加个outline就很容易看清楚。（为什么不加border，outline不会影响dom的尺寸，而border会，所以研究dom的表现推荐使用outline而不是border）。
还不明白，来个说明图片。
很明显，鼠标放在红色箭头的区域时，就会“抖得”很厉害。因为鼠标悬停的元素移上去了，而鼠标就脱离了元素，所以元素就要恢复没有悬停的效果，就是回到原位，但是回到原位之后，鼠标又在那儿等他，所以又进入悬停状态，又要上去，循环往复。就表现为在不停的抖动。这种情况只有鼠标停在这个临界区时才会出现，临界区的宽度就是dom在悬停的时候上移的距离。所以上移越大，越容易出现这种“抖动”。实际的这个案例是5px，还是不太容易被用户发现的。但是大厂嘛，毕竟是要“脸”的，犯这么低级的错误，怎么都是有点挂不住面子。
解决方案其实很简单，就是消除那个临界区域。怎么消除？就是保证鼠标停在一个位置，item永远处于被鼠标悬停的状态。但实际为啥不是呢，因为dom上移，但是高度没变，所以鼠标就可能跟dom脱离接触，如果dom是“长高”，而不是上移，那鼠标就一直跟dom元素保持“亲密接触”了么。
从图中可以看出，当悬停的时候，li元素加了top:-5px，元素才向上移动的。这个时候我们只要加一个样式height: calc(100% + 5px);就行了（不同高度的时候要不同写法，总之就是保证被偏移的元素的高度也增加偏移量相同的值，这样鼠标就不会因为元素偏移而与元素脱离接触了）。修改之后的样式是这样的。
可以看出来，hover之后虽然上移了，但是dom的下边界并没有上移，所以“临界区”高度为0。也就不可能出现抖动了。
虽然只是一个小小的易用性问题，但是作为前端开发，不管多细小的交互上的缺陷，我们都应该尽量注意，这是我们的脸面。同学们下次再做这种悬停动效，就不要再“手抖”了哦!!!
