CSS设置样式时，鼠标移动到div上，发生抖动问题解决办法

出现抖动现象背后的原因

比如你可能会遇到这样的场景，就是有一个div块，当鼠标悬浮的时候，需要添加一个border（比如多个div块以卡片的形式排列起来）。你可能会考虑写成这样的CSS：

div:hover {
   
border: 1px solid blue
}

但是这样写会导致一个问题，就是div块之间比如说间距是3px，这时候加了一个border，间距可能会变成4px。div块之间间距突然拉大（比如说那种多个卡片场景），从视觉上来看就好像页面的div块间发生了抖动。你可能会考虑使用box-sizing: border-box来解决这个问题，这个时候如果content里没有东西还好，如果有内容，突然增加的border也会导致内容发生一点抖动现象。

对于这个抖动问题的解决原则就是让各个块或者内容之间的距离始终保持不变，距离不变就不会发生抖动。如何让距离保持不变呢？可以先用transparent这个特性来做一个占位。

一个简单场景

简单场景是之前没有border，悬浮或者点击之后添加border。可以写成这样：

<