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;
}

Answer 2

您可以添加

border: 1px solid #ccc;

到＃elem1

并更改

border: 1px solid red;

表示

border: 1px solid red !important;

in .chover

Answer 3

如果您没有指定尺寸，

Box-Sizing不会以这种方式工作，

给元素一个宽度和一个高度，即使它是基于％的，它将按预期工作

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

3 个答案: