当我们将鼠标悬停在元素上并将其设置为边框，在图像上并将其设置为边框时，我们如何避免抖动

Question

我想在鼠标悬停时设置下划线文本，并在鼠标悬停时对图像应用边框，当我这个网站震动时。请告诉我们如何避免这种情况。

Answer 1

很难说没有看到错误，但听起来你的图像周围没有足够的空间，所以当边框被应用时它会把所有东西都推出去。

根据您应用于边框的像素数将导致在这些方向上移动。

如果你想避免移动，请在正常状态下为你的div设置相同的边框，并使用透明色。这样，当您应用悬停规则时，将无法进一步移动。

快速编辑

为了举个例子，我创建了以下笔 - http://codepen.io/mikejayallen/pen/LpEebb

CSS示例：

#with-invisible-margin {
  border: 5px solid white;
}

#with-invisible-margin:hover {
  border: 5px solid red;
}