优化锚点悬停Div左滑效果 解决文本过小时间距过宽问题

我想实现某网站右侧蓝色浮动按钮的同款滑动效果，结构为列表项包含<a>标签和<div>标签，<div>默认隐藏，hover锚点时显示。目前已通过代码实现基础效果，但存在div内文本较小时间距过宽的问题，希望优化代码达到流畅的目标效果。

问题截图：
目标效果参考截图：

核心修改点 #

• 让.label宽度自适应文本内容，避免固定位移导致的间距问题
• 用CSS transform替代jQuery的left动画，提升流畅度与性能
• 统一初始隐藏状态，默认完全藏在按钮右侧，hover时滑入
• 精简冗余标签，优化结构层级

优化后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<ul class="rainbow-floating-menu">
  <li class="get-a-quote">
    <a href="/get-a-quote"></a>
    <div class="label">Free Estimate Now</div>
  </li>

  <li class="schedule-walkthrough">
    <a href="#"></a>
    <div class="label">Book Your Walkthrough</div>
  </li>
  
  <li>
    <a href="#"></a>
    <div class="label">Service Calculator</div>
    <div id="box" class="box">
      <div class="header">
        <p>Service Calculator</p>
        <div class="close-btn">
          <picture>
            <img src="/wp-content/uploads/2024/06/close-content.webp" alt="close" width=20 height=20>
          </picture>
        </div>
      </div>
      <div class="content">
        <?php get_template_part('assets/php/floating-menu-content/service-calculator'); ?>
      </div>
    </div>
  </li>
</ul>

CSS

.rainbow-floating-menu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
}

.rainbow-floating-menu>li {
  position: relative;
  list-style: none;
  width: 44px;
  height: 44px;
  margin: 8px 0; /* 按钮间距可按需调整 */
}

.rainbow-floating-menu>li a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  background-color: #0071e3; /* 示例蓝色，可替换为你的全局变量 */
}

.rainbow-floating-menu>li .label {
  position: absolute;
  top: 0;
  right: 44px; /* 紧贴按钮右侧 */
  height: 44px;
  background-color: var(--global-palette1);
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 0 20px;
  transform: translateX(100%); /* 默认完全隐藏在右侧 */
  transition: transform 0.3s ease; /* 平滑过渡动画 */
  color: #fff; /* 文本颜色按需调整 */
  font-size: 14px;
  z-index: 1;
}

.rainbow-floating-menu>li:hover .label {
  transform: translateX(0); /* hover时滑入显示 */
}

/* Service Calculator 弹窗样式 */
.rainbow-floating-menu .box {
  position: fixed;
  right: 44px;
  top: 50%;
  transform: translateY(-50%) translateX(100%);
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  width: 300px;
  transition: transform 0.3s ease;
  z-index: 10;
}

.rainbow-floating-menu li:hover .box {
  transform: translateY(-50%) translateX(0);
}

.box .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.close-btn {
  cursor: pointer;
}

JavaScript（仅保留弹窗关闭逻辑）

jQuery(document).ready(function($) {
  $('.close-btn').on('click', function() {
    $(this).closest('.box').css('transform', 'translateY(-50%) translateX(100%)');
  });
});

优化说明 #

1. 自适应宽度：通过white-space: nowrap让.label宽度随文本内容自动撑开，彻底解决短文本间距过大的问题
2. 流畅动画：CSS transform自带硬件加速，比jQuery animate更流畅，300ms过渡时长更贴近目标网站的交互节奏
3. 状态管理：默认通过translateX(100%)完全隐藏标签，hover时归位，逻辑清晰且避免布局偏移
4. 层级控制：明确z-index确保按钮在标签上方，hover交互不受遮挡
5. 结构精简：移除.label内多余的<p>标签，减少嵌套层级

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