ボーダー幅の変更に他の要素の配置に影響を与えない

Question

他の要素の配置に影響を与えずに、ホバー上の円のボーダー幅を変更したいと思います。

this jsFiddleでより明確になります。

HTML

<span class="menu"><i class="cercle"></i>Foo</span> 
<span class="menu"><i class="cercle"></i>Bar</span> 

CSS

.menu{ 
    margin-right: 10px; 
    cursor: pointer 
} 

.cercle{ 
    border-radius: 16px; 
    margin-right: 5px; 
    vertical-align: middle; 
    width: 16px; 
    height:16px; 
    display:inline-block; 
    border: 5px solid #ff9c08 
} 

.menu:hover i{ 
    border-width: 3px; 
    transition:border-width .1s 
} 

Answer 1

と空間際border-width変化それぞれが変更を占めています。

私はあなたの代わりに、そのようbox-shadowを使用することを示唆している：

.cercle { 
    box-shadow: 0 0 0 4px #ff9c08; 
} 

.menu:hover i { 
    box-shadow: 0 0 0 2px #ff9c08; 
    transition: box-shadow .1s 
} 

はあなたのフィドルhereの更新バージョンをチェックしてください。

もう1つの解決策は.cercleのbox-sizing: border-box;プロパティを設定することですが、Internet Explorer、Safari、Firefox、Operaの初期バージョンとは互換性がありません。

互換性の詳細については、box-sizinghereをご覧ください。

Answer 2

これは、要素の幅と高さを増加させる境界線を追加するなどの要素にすでに国境を持たないことはできません。私が好む技術は、ホバリング時に色を変えて開始するために、非ホバリング状態で透明な枠線を持たせることです。

要素が相対的に配置されているので、ことはできません

.menu { 
    border: 3px solid rgba(0,0,0,0); 
} 

.menu:hover { 
    border-color: black; 
} 

Answer 3

これは実際には可能です。box-sizingです。

は.cercle { box-sizing: border-box; }を設定する.cercle要素のwidthとheightを境界のサイズを含むことを意味します。

はそのように、.cercle Sのサイズは、box-sizing: border-boxを縮小しますが、それは簡単な修正です：ちょうど21pxから16pxからheightとwidthまで（5pxの変更、5pxは境界のサイズだったので）。

うまくいけば、これがどのようにうまくいくのか説明しました。

コードを機能させるため、このjsfiddleを参照してください：の https://jsfiddle.net/xhanrkzy/3/