Question

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

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。使用select distinct city from station where right(city,1) in ('a', 'e', 'i', 'o','u') and left(city,1) in ('a', 'e', 'i', 'o','u')：

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

box-sizing: border-box

<强> 2。使用.cercle { box-sizing: border-box; }：

另一种方法是使用box-shadow属性来模仿边框的视觉外观，但没有其特定的行为。元素的阴影在修改时不会影响相邻元素，因此在尝试达到您想要的效果时，这是另一个好的选择。

box-shadow

详细了解box-sizing和box-shadow的浏览器兼容性，了解哪些更适合您。您可以在here找到jsfiddle的更新版本，并在下方找到一个片段。

<强>段：

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

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

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

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包含边框的大小。

因此，.cercle的大小会随box-sizing: border-box缩小，但这很容易解决：只需向上height和width 16px至21px（5px的更改，因为5px是边界的大小。）

希望我能解释一下这是如何运作的！

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

Answer 4

我假设你想缩小它。
我使用 transform 属性来执行此操作：

.menu:hover i {
    /* border-width: 3px; */
    transform: scale(0.95);
    transition: border-width .1s
}

不要影响其他元素在边界宽度变化上的定位

4 个答案: