div hover 时设置 border，出现抖动如何解决？

问题描述

给 div 添加以下样式

div:hover { border: 1px solid red; }

当鼠标移动到 div 时，产生抖动或偏移。

原因

给 border 时设置了 1px 边框，多出的这 1px，与其它元素产生了挤压， 导致 div 抖动或偏移。

解决方法

方法1: 给 div border 颜色设置为背景色

div { background: #aaa; border:1px solid #aaa;

&:hover { border: 1px solid red; } }

方法2: 给 div border 颜色设置为透明

div { border:1px solid transparent;

&:hover { border: 1px solid red; } }

来源： div hover 时设置 border，出现抖动如何解决？