css - 在悬停时添加边框会扩展元素

Question

我有这个设置:

<div class="outer" id="elem1">Lorem ipsum dolor sit amet</div>

.outer {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
}
#elem1{
    position:absolute;
    top:0px;
    left:0px;
    background:#ccc;
    color:white;
    padding:5px;
 }
.chover{
    border: 1px solid red;
}

正如您在悬停时看到的，元素大小会扩大，我正在努力防止这种情况发生:

http://jsfiddle.net/nVaE9/38/

Answer 1

可以给.outer添加透明边框

.outer {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
    border: 1px solid transparent;
}

然后将替换为相同宽度的红色边框。

---

尽管不用 jQuery 也可以实现:

.outer {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
    border: 1px solid transparent;
}
#elem1 {
    position:absolute;
    top:0px;
    left:0px;
    background:#ccc;
    color:white;
    padding:5px;

}
.outer:hover {
    border: 1px solid red;
}