边框宽度变化时不影响其他元素的定位

我想在悬停时更改圆圈的边框宽度，而不影响其他元素的位置。

会更清楚这个jsFiddle https://jsfiddle.net/xhanrkzy/.

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
}

您可以通过多种不同的方式来实现您想要的效果。

1. 使用box-sizing: border-box:

通常，相邻元素会受到元素的更改的影响border-width属性，因为元素是相对定位的，并且每个元素占据的空间在border-width变化。使用box-sizing: border-box确保边框的宽度包含在元素的尺寸中。

.cercle {
    box-sizing: border-box;
}

2. 使用box-shadow:

另一种选择是使用box-shadow属性，相反，模仿边框的视觉外观，但没有其特定的行为。元素的阴影在修改时不会影响相邻元素，因此在尝试实现所需效果时，这是另一个不错的选择。

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

.menu:hover > .cercle {
    box-shadow: inset 0 0 0 2px #ff9c08;
}

查看有关浏览器兼容性的更多信息box-sizing https://caniuse.com/#feat=css3-boxsizing and box-shadow https://caniuse.com/#feat=css-boxshadow看看哪个更适合您。可以找到您的 jsfiddle 的更新版本here https://jsfiddle.net/xhanrkzy/5/和下面的一个片段。

Snippet:

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

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

#ex1 .cercle {
  border: 4px solid #ff9c08;
  box-sizing: border-box;
}

#ex1 .menu:hover i {
  border-width: 2px;
  transition: border-width .1s;
}

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

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

<div id = "ex1">
  <span class="menu"><i class="cercle"></i>Foo</span>
  <span class="menu"><i class="cercle"></i>Bar</span>
</div>
<br>
<div id = "ex2">
  <span class="menu"><i class="cercle"></i>Foo</span>
  <span class="menu"><i class="cercle"></i>Bar</span>
</div>