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

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

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

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和box-shadow的浏览器兼容性，了解哪种更适合您。你的jsfiddle的更新版本可以在下面找到here和一个片段。

片段：

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

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; }意味着width元素的height和.cercle包括边界的大小。

因此，.cercles的大小将随box-sizing: border-box缩小，但这是一个简单的解决方法：从height到width（16px的变化，因为21px是边界的大小）的5px和5px。

希望我解释这是如何工作的好！

有关正常运行的代码，请参阅此jsfiddle：https://jsfiddle.net/xhanrkzy/3/