Question

很抱歉，但由于我的英语不好，我不知道如何提问/搜索。

我有div元素互相浮动。当鼠标悬停在一个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（不要那样）我希望保持位置，红色框与绿色重叠，当鼠标悬停在绿色框上与蓝色框重叠时也一样。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: