css – 不影响其他元素在边框宽度更改上的定位

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

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
}

解决方法

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

1.使用Box-sizing：border-Box：

通常,相邻元素会受到更改元素的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和box-shadow的浏览器兼容性的更多信息,以了解哪种更适合您.您可以在here找到jsfiddle的更新版本,下面是一个片段.

片段：

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