如何将hover触发的元素宽度过渡效果从左到右改为从右到左？

嘿，这个需求我熟！要把展开方向从左到右改成从右到左，核心就是把元素的宽度增长起点从左边换到右边就行。下面给你两种靠谱的实现方式，你可以根据自己的布局场景选：

方法一：绝对定位（最通用） #

这种方法适配绝大多数布局场景，通过绝对定位固定元素的右侧，让宽度从0增长时自然向左展开：

HTML结构 #

<div class="container">
  <button class="trigger">悬停我展开</button>
  <div class="expandable-element"></div>
</div>

CSS样式 #

.container {
  position: relative; /* 作为绝对定位的参考容器 */
  width: 500px; /* 自定义容器宽度，方便观察效果 */
  height: 100px;
  border: 1px solid #ddd;
  margin: 20px;
}

.trigger {
  padding: 8px 16px;
  cursor: pointer;
}

.expandable-element {
  position: absolute;
  top: 0;
  right: 0; /* 关键：把元素右侧固定在容器右边 */
  width: 0;
  height: 100%;
  background-color: #42b983;
  transition: width 0.3s ease; /* 保持你要的0.3s过渡动画 */
  overflow: hidden; /* 防止内容溢出（如果元素有内容的话） */
}

/* 悬停按钮时触发宽度变化 */
.trigger:hover + .expandable-element {
  width: 400px;
}

方法二：Flex布局（流式场景适用） #

如果你的布局是流式的，不想用绝对定位，可以借助Flex的靠右排列特性实现：

CSS样式（HTML结构和上面一致） #

.container {
  display: flex;
  justify-content: flex-end; /* 让子元素靠右对齐 */
  width: 500px;
  height: 100px;
  border: 1px solid #ddd;
  margin: 20px;
  position: relative; /* 给按钮做绝对定位用 */
}

.trigger {
  position: absolute; /* 按钮脱离文档流，不影响展开元素的位置 */
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 16px;
  cursor: pointer;
}

.expandable-element {
  width: 0;
  height: 100%;
  background-color: #42b983;
  transition: width 0.3s ease;
  overflow: hidden;
}

.trigger:hover ~ .expandable-element {
  width: 400px;
}

小提示 #

如果展开元素内部有文字或其他内容，一定要加上overflow: hidden，否则宽度为0时内容会强制显示出来，破坏过渡效果。

内容的提问来源于stack exchange，提问作者Mazik