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

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

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