如何在没有移动图像的情况下悬停CSS Img边框

Question

我尝试使用鼠标悬停显示图像周围的边框。以下是我正在寻找的内容，但是当边框出现时它会移动图像。如何通过移动图像来实现相同的效果？

这是一个小伙伴 http://jsfiddle.net/8gA6z/

                        

    

.screenshots {
    float: left;
    width: 155px;
}
.screenshots img:hover{
    border: 5px solid #06C;
}

Answer 1

在悬停时提供透明边框并更改边框颜色

.screenshots img {
    border:5px solid transparent;
}
.screenshots img:hover {
    border-color:#06C;
}

Updated fiddle here.

Answer 2

你可以给它一个透明的边框，当没有悬停时是相同的宽度：

.screenshots img {
    border: 5px solid transparent;
}

<强> jsFiddle example