ホバーにボーダーを追加すると要素が拡張されます - css

私はこの設定をしています：

<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/

回答：

回答№1は5

透明な枠線を追加することができます .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;
}

---

回答№2の場合は0

あなたは付け加えられます

border: 1px solid #ccc;

＃elem1へ

変更

border: 1px solid red;

そのために

border: 1px solid red !important;

で.chover

---

回答№3の場合は0

Box-Sizingは、サイズを指定しないと、この方法では動作しません。

たとえそれが％ベースであってもあなたが期待するように動作するとしても、要素に幅と高さを与えてください

---