css鼠标触碰，边框改变

我想做个效果，原先的边框是 ｛border: 1px solid #ccc;｝ 鼠标放上去以后，变成 {border: 2px solid red;}
现在问题 是 从1px变成2px 以后，会出现图片抖动现象
想做成，想同城 17u.cn/hotel/ 网站，上面那个，鼠标放上去，不会抖动，边框颜色和宽度同时变。

        首先，楼上说得很对，你之所以出现图片抖动的原因是因为，border变为2px的时候，整个盒子的width和height都变了，浏览器对整个排版会重新解析，导致这个盒子和出现一些挤压。

        细说一下，浏览器对盒模型的解析，会影响盒子的width宽度、height高度的属性有边框(border)、内补丁(padding)、外补丁(margin)。显然一个盒子真实宽度=width+border*2+margin*2；真实高度=height+border*2+margin*2；而padding是只会影响内容的编排，

        举例说明，我定义了一个宽度高度都是100px的div，margin，border，padding都是10px；最后在火狐的视图下看和模型，浏览器的解析结果是120px，如图所示：

<div style="width:100px;height:100px;border:10px;margin:10px;padding:10px;"></div>

        

        总言之，为了防止你出现图片的抖动，主要就是要达到鼠标放上去之后的盒子的总宽度和总高度是不变的才行：

        所以我的意见是：

<style type="text/css">
#box{width:100px;height:100px;border:1px solid #ccc;}
#box:hover{width:98px;height:98px;border:2px solid #ccc;}
</style>
<div id="box"></div>

        你可以试一下，不懂欢迎再和我探讨……

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/27m72284f.html