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

当我们将鼠标悬停在元素上并设置其边框时，如何避免抖动？以下是我编写的代码示例：

有没有避免震动的方法？假设我将鼠标悬停在文件上，会出现边框，但由于边框被渲染，该行文本会向右移动一点。如果我们离开，它会再次摇晃

---

有什么办法可以避免这种抖动吗？

解决这个问题的通常方法是从一个透明的边框开始，然后在悬停时给边框加上颜色

我用这个技巧更新了你的小提琴：

CSS和JavaScript:

---

或者，在设置边框时，添加相同大小的负边距。

Sass

.image{
   border: 1px solid transparant;
   &:hover{
      border 1px solid red;
   }
}

---

使用-webkit背面可见性：隐藏

+1用于包含工作示例。为了向我介绍一个新的scratchpad工具，我有很多次遇到像这样的愚蠢问题，但我从来没有想到facepalm+1。请注意，没有必要使用javascript来实现这一点。您可以使用鼠标悬停选择器使用100%css来完成此操作。@McSas：这是正确的，因为现在开发人员很少以IE 6为目标。

li.hover(function() {
    $(this).css('border-color', 'white #808080 #808080 white');
}, function() {
    $(this).css('border-color', 'transparent');
});​

.image{
   border: 1px solid transparant;
   &:hover{
      border 1px solid red;
   }
}