如何实现鼠标悬停时文本从右侧滑入的动画效果

问题出在绝对定位的文本没有层级优势，同时动画位置需要微调，以下是修改后的实现方案：

修改核心点： #

• 给文本span添加z-index: 1，确保它在图标上方显示
• 调整span的初始偏移量，让它从图标右侧外开始滑入，hover时移动到图标左侧区域
• 移除.utility-nav-link:hover中固定宽度的设置，避免布局错乱

完整代码： #

body {
  margin: 3em;
}

.utility-nav-links {
  display: flex;
  justify-content: end;
}

.utility-nav-link {
  margin-left: 18px;
  position: relative;
  transition: transform 0.3s ease;
}

.utility-nav-link span {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateX(10px); /* 初始在图标右侧外 */
  z-index: 1; /* 让文本在图标上方 */
}

.utility-nav-link:hover {
  transform: translateX(calc(-100% + 20px)); /* 根据文本宽度左移，保持图标位置 */
}

.utility-nav-link:hover span {
  opacity: 1;
  transform: translateX(calc(-100% - 10px)); /* 滑到图标左侧 */
}

.utility-nav-icon {
  background: #888;
  border: 1px solid #888;
  width: 20px;
  height: 20px;
}

<div class="utility-nav-links">
  <a class="utility-nav-link" href="">
    <img class="utility-nav-icon" src="https://picsum.photos/40" alt="">
    <span>search</span>
  </a>
  
  <a class="utility-nav-link" href="">
    <img class="utility-nav-icon" src="https://picsum.photos/42" alt="">
    <span>info</span>
  </a>
  
  <a class="utility-nav-link" href="">
    <img class="utility-nav-icon" src="https://picsum.photos/44" alt="">
    <span>My Housing</span>
  </a>
</div>

修改后，鼠标悬停时文本会从右侧滑入并覆盖在图标上方，动画效果符合预期。

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