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

【问题标题】：On hover absolute element but keep other elements at start position在悬停绝对元素上，但将其他元素保持在起始位置
【发布时间】：2017-05-15 08:36:50
【问题描述】：

对不起，由于我的英语不好，我不知道如何询问/搜索。

我有 div 元素是浮动的。我希望当鼠标悬停在一个 div 上时，可以通过过渡改变宽度并在右侧重叠另一个。

HTML

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

CSS

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

示例jsfiddle

在示例中，我有 3 个盒子（红色、绿色和蓝色）当鼠标悬停在红色上时，左边的绿色框：0（不要那样）我想留在位置，红色框与绿色重叠，当鼠标悬停在绿色框上重叠蓝色时也是如此。

【问题讨论】：

标签： css

【解决方案1】：

您可以使用inline-block 来定位内联元素并使用transform: scaleX() 来更改悬停时的元素宽度，而不是使用浮动和更改宽度。此外，您还需要添加transform-origin: left 以使元素从左向右缩放。

.box {
  margin: 5px;
  width: 100px;
  height: 100px;
  transition: all 0.3s ease-in;
  transform-origin: left;
  display: inline-block;
}
.box:hover{
 transform: scaleX(1.3);
}

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

【讨论】：

正确答案，但也许我不清楚，实际上每个框都有隐藏在 100px 上的文本，如果宽度变化不缩放，则会出现文本。