右侧悬停展开按钮：如何保持未悬停按钮靠右且避免移位？

问题：右侧地图按钮悬停展开提示文本时，所有按钮会随之移位。

问题原因 #

当鼠标悬停按钮时，提示文本（.hint-right）从display:none变为display:block，导致按钮元素的宽度突然增加，进而带动整个按钮容器的宽度变化，最终引发其他按钮移位。

修复方案 #

通过绝对定位让提示文本脱离文档流，避免其显示时改变按钮的布局宽度，同时保留过渡动画效果：

1. 给按钮添加相对定位，作为提示文本的定位参考
2. 用opacity和visibility替代display控制提示文本的显示/隐藏，配合绝对定位消除布局干扰
3. 优化过渡动画，确保提示文本的显示更平滑

修改后的完整代码 #

.extendable-button-container-right {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.extendable-button-right {
  background-color: #0d6efd;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
  flex-direction: row-reverse;
  position: relative; /* 添加相对定位，作为提示文本的定位基准 */
}

.extendable-button-right i {
  color: white;
  transition: all 0.3s ease;
}

.extendable-button-right:hover,
.extendable-button-right:focus {
  background-color: #0d6efd;
}

.extendable-button-right:active {
  background-color: #0daafd;
}

.hint-right {
  opacity: 0; /* 初始透明 */
  visibility: hidden; /* 初始不可见 */
  font-size: 14px;
  color: white;
  transition: all 0.3s ease;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
  position: absolute; /* 绝对定位脱离文档流，不占用按钮布局空间 */
  right: 40px; /* 调整提示文本与按钮的间距 */
  white-space: nowrap; /* 防止提示文本换行 */
}

.extendable-button-right:hover .hint-right,
.extendable-button-right:focus .hint-right {
  opacity: 1; /* 悬停时显示 */
  visibility: visible;
}

.extendable-button-right:hover i,
.extendable-button-right:focus i {
  transform: scale(1.2);
}

关键修改说明 #

• position: relative：给按钮添加相对定位，让提示文本可以精准对齐按钮
• opacity + visibility：替代display属性，实现平滑过渡的同时避免页面布局重排
• position: absolute：让提示文本脱离文档流，显示时不会改变按钮的宽度，彻底解决移位问题
• white-space: nowrap：确保长提示文本不会换行，保持界面整洁

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