template

      <!-- 导航栏右侧菜单 -->
      <div class="navR">
        <div
          :class="[
            'rList',
            { fonts: !topStatus },
            { activeColor: item.active },
          ]"
          v-for="item in navList"
          @mouseover="moveUnderline($event)"
          @mouseleave="hideUnderline"
          @click="navListJump(item)"
        >
          {{ item.name }}
        </div>
        <div class="underline" :style="underlineStyle"></div>
      </div>

script

// 下标的样式对象
const underlineStyle = ref({
  width: '0px',
  left: '0px',
  transform: 'translateX(0)',
});

// 鼠标移动到导航项上时调用，设置下标的宽度和位置
const moveUnderline = (event) => {
  const target = event.target;
  underlineStyle.value = {
    width: `${target.offsetWidth}px`,
    left: `${target.offsetLeft}px`,
  };
};
// 鼠标移出时隐藏下标
const hideUnderline = () => {
  underlineStyle.value = {
    width: '0px',
    left: underlineStyle.value.left, // 保持位置不变，只是缩小宽度
    transform: 'translateX(0)',
  };
};

css

 .navR {
      display: flex;
      align-items: center;
      overflow: hidden;
      position: relative;
      .rList {
        font-size: 1rem;
        font-weight: bold;
        color: rgb(255, 255, 255);
        line-height: 1.4375rem;
        cursor: pointer;
        padding: 0.625rem 0.9375rem;
      }
      .underline {
        position: absolute;
        bottom: 0rem;
        height: 0.1875rem;
        background-color: #fff;
        transition: all 0.3s ease;
      }

      .search {
        cursor: pointer;
        img {
          width: 1.5rem;
        }
      }
    }