伪类:hover对边框使用出现盒子抖动的解决办法

问题描述

        初始阶段盒子无边框，当鼠标悬停启用：hover之后加上1px的边框，这时候对外显示的效果是盒子整体出现抖动。 

---

原因分析：

通常情况下盒子的宽高已经确定，当伪类启用时box-sizing:border-box;盒子不会向外扩大，只会挤压内容大小。

---

解决方案：

在一开始的时候就给盒子加上边框，边框颜色设置为透明，这样一来，鼠标经过前后盒子内容的空间都是一致的。

    border: 1px solid transparent;