Css 悬停绝对元素，但将其他元素保持在起始位置

对不起，因为我的英语不好，我不知道怎么问/搜索

我有div元素，它们彼此浮动。 我想当鼠标在一个div中移动时，通过变换改变宽度，并在右侧重叠另一个div

HTML

范例

在示例中，我有3个框（红色、绿色和蓝色） 当鼠标移到红色上时，绿色框向左移动：0（不要这样做）

---

我想停留在位置上，红色框与绿色框重叠，当鼠标移到绿色框上与蓝色框重叠时也是如此。

您可以使用

内联块来内联定位元素，并使用
变换：scaleX（）
来更改悬停时的元素宽度，而不是使用浮动。您还需要添加
变换原点：left
，以使元素从左向右缩放


.box{
保证金：5px；
宽度：100px；
高度：100px；
过渡：所有0.3秒都容易进入；
变换原点：左；
显示：内联块；
}
.box:悬停{
转换：scaleX（1.3）；
}
回答正确，但可能我不清楚，实际上每个框都有隐藏在100px上的文本，如果宽度更改不按比例缩放，则会显示文本。
<div class="boxes">
  <div class="box" style="background:red"></div>
  <div class="box" style="background:green"></div>
  <div class="box" style="background:blue"></div>
</div>

.boxes {
  position: relative;
}
.box {
  float:left;
  margin: 5px;
  width: 100px;
  height: 100px;
  transition: width 1s ;
}
.box:hover{
  width: 155px;
  position: absolute;
}