悬停时从左侧而不是右侧添加宽度

Question

在此示例中，悬停内部 div 从右侧添加宽度。

我想把它从左边里面放大，怎么做。

#outer{
  width: 50px;
  height: 50px;
  margin: auto;
}

#inner{
  height: 50px;
  width: 50px;
  background-color: red;
  transition: all .5s;
}

#inner:hover{
  width: 150px;
}

<div id="outer">
  <div id="inner"></div>
</div>

Answer 1

您必须将 div“固定”到位，可能使用位置或边距，然后更改宽度。

#inner {
  height: 50px;
  width: 50px;
  margin-left: auto;
  margin-right: calc(50vw - 25px);
  background-color: red;
  transition: width .5s;
}

#inner:hover {
  width: 150px;
}

<div id="outer">
  <div id="inner"></div>
</div>

Answer 2

调整 margin-left 而不是 width

#outer{
  width: 50px;
  height: 50px;
  margin: auto;
}

#inner{
  height: 50px;
  background-color: red;
  transition: all .5s;
}

#inner:hover{
  margin-left: -100px;
}

<div id="outer">
  <div id="inner"></div>
</div>

Answer 3

这有点取决于扩展的确切效果。

但是假设你确实希望外部元素保持在 50px 而内部元素只是扩展但不影响周围的元素，你可以将它定位为绝对和右：0。其余代码可以保持不变（即改变宽度）。

#outer {
  width: 50px;
  height: 50px;
  margin: auto;
  position: relative;
}

#inner {
  height: 50px;
  width: 50px;
  background-color: red;
  transition: all .5s;
  position: absolute;
  right: 0;
}

#inner:hover {
  width: 150px;
}

<div id="outer">
  <div id="inner"></div>
</div>

悬停时从左侧而不是右侧添加宽度

On hover add width from left instead of right

html

css

hover

width