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

Question

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

http://jsfiddle.net/s3N2h/

是否有避免晃动的技术？假设我将鼠标悬停在文件上，边框会出现，但由于边框被渲染，该文本行会向右移动一点。如果我们再次徘徊，它会再次震动。

有没有CSS方法可以避免这种震动？

Answer 1

此问题的常见解决方案是从透明边框开始，然后在悬停时为边框指定颜色。

我用这种技术更新了你的小提琴：

  

http://jsfiddle.net/s3N2h/1/

CSS和JavaScript：

#my_menu li {
    border: 1px solid transparent;
}

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

Answer 2

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

Answer 3

无礼

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

Answer 4

使用-webkit-backface-visibility: hidden;