我想在悬停时更改圆的边框宽度而不影响其他元素的位置.
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 }
解决方法
您可以通过几种不同的方式来实现您想要的效果.
通常,相邻元素会受到更改元素的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>