ホバー時にテキストを入れ替えしホバーを外しても戻らないようにする

実現したいこと

テキストを２つ用意して文字をホバーすると二番目のテキストが下から出てきて一番目の表示されていた文字が上に上がって見えないようになり、ホバーを外すとまた元に戻るように実装しています。
ですが、ホバーを外した時は何も動きはなくまたホバーすると文字が入れ替わるような実装をしたいです。

<div class="hamburger-menu-list-container01">
          <a href="#top-about" class="hamburger-menu-list01">
            <span class="hamburger-menu-list-text01">テキスト01</span>
            <span class="hamburger-menu-list-text01">テキスト01</span>
          </a>
          <a href="#top-features" class="hamburger-menu-list01">
            <span class="hamburger-menu-list-text01">テキスト02</span>
            <span class="hamburger-menu-list-text01">テキスト02</span>
          </a>
          <a href="#top-user-steps" class="hamburger-menu-list01">
            <span class="hamburger-menu-list-text01">テキスト03</span>
            <span class="hamburger-menu-list-text01">テキスト03</span>
          </a>
          <a href="#top-products" class="hamburger-menu-list01">
            <span class="hamburger-menu-list-text01">テキスト04</span>
            <span class="hamburger-menu-list-text01">テキスト04</span>
          </a>
          <a href="/shop/pages/howtouse" class="hamburger-menu-list01" target="_blank">
            <span class="hamburger-menu-list-text01">テキスト05</span>
            <span class="hamburger-menu-list-text01">テキスト05</span>
          </a>
          <a href="#top-set-price" class="hamburger-menu-list01">
            <span class="hamburger-menu-list-text01">テキスト06</span>
            <span class="hamburger-menu-list-text01">テキスト06</span>
          </a>
        </div>

.hamburger-menu-list-text01 {
  position: absolute;
  left: 0;
  display: block;
  height: 100%; /* 縦幅をボタンと同じにする */
  width: 100%; /* 横幅をボタンと同じにする */
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1em;
  color: #000000;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: all 0.3s; /*アニメーション実行時間 */
}

/* ボタンのテキスト(デフォルトのテキスト) */
.hamburger-menu-list-text01:nth-child(1) {
  top: 0%;
}

/* ボタンのテキスト(隠れているテキスト) */
.hamburger-menu-list-text01:nth-child(2) {
  top: 100%;
}

/* ボタンホバーアクション */

.hamburger-menu-list01:hover .hamburger-menu-list-text01:nth-child(1),
.hamburger-menu-list01.is-active .hamburger-menu-list-text01:nth-child(1) {
  top: -100%;
  transition: all 0.3s;
}

.hamburger-menu-list01:hover .hamburger-menu-list-text01:nth-child(2),
.hamburger-menu-list01.is-active .hamburger-menu-list-text01:nth-child(2) {
  top: 0%;
  transition: all 0.3s;
}

let n;
document.addEventListener(
  "mouseenter",
  ({ target }) => {
    if (
      target instanceof HTMLElement &&
      (n = target.closest(".hamburger-menu-list01, .hamburger-menu-list02"))
    ) {
      n.classList.add("is-active");
    }
  },
  true
);

document.addEventListener("transitionend", ({ target }) => {
  target.closest(".is-active")?.classList.remove("is-active");
});

document.addEventListener(
  "mouseout",
  ({ target }) => {
    setTimeout(() => {
      target.closest(".is-active")?.classList.remove("is-active");
    }, 300);
  },
  true
);

行動規範の内容に同意します

回答1件

質問の解釈を間違っていたらすみません。
質問文から読み取るに、現状はhoverした時と外した時でどちらの動作でもテキストが入れ替わっている状態で意図した動作でなく、hoverが入った時のみテキストが入れ替わって欲しくてhoverが外れる時はテキストがそのままにしておきたいということでしょうか？

それを前提に回答してみると、
コードを見ると、質問者さんは
⑴ cssでのhoverとjavascriptのmouseenterを混同して解釈している様である
⑵ javascriptでaddEventListenerを直接documentに対して呼んでいる
ことが気になりました。

⑴について、cssのhoverはマウスカーソルが要素（タグ）に載っているかそうでないかを合わせて判定基準にしていおり、javascriptのmouseenterは要素内にカーソルが外から入ってきた時のみを判定基準にし、要素から出ていったことは判定基準になっていないです。

⑵について、javascriptのコードを見るに、addEventListener("transitionend", ~~~)や target.closest()の部分など難しいEventや関数（メソッド）を使われている様で、これはdocumentに対して直接addEventListenerを読んでしまっているため、この様な難しい記述になっているのだと思いました。

javascriptでは要素ごとにその要素をjavascriptコードで使える様な形で取得することができる方法があります。具体的には
document.querySelector(" . クラス名 ")
const list1 = document.querySelector('.hamburger-menu-list01')
です。（要素を取得するメソッドは他にもあるので調べてみてください）

javascriptのdocumentは<html>タグのさらに親要素の様なものを表しています。（詳しくは調べてみてください）

この取得したlist1を使ってaddEventListenerを下記の様に書けます。
list1.addEventListener("mouseenter", イベントの処理)

これらを踏まえた上で、サンプルのコードを書いてみましたのでこれを参考にしていただければと思います。ブラウザに表示させればそのまま確認できると思います。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7
8  <style>
9    .hamburger-menu-list01 {
10      display: inline-block;
11      position: relative;
12      height: 50px;
13      width: 200px;
14      background-color: pink;
15      /* overflow:hidden; //枠の外を見えない様にします */
16    }
17    .hamburger-menu-list-text01 {
18      display: inline-block;
19      position: absolute;
20      left: 0;
21      top: -100%;
22      color: red;
23      transition: top 3s ease;
24    }
25    .hamburger-menu-list-text02 {
26      display: inline-block;
27      position: absolute;
28      left: 0;
29      top: 100%;
30      color: blue;
31      transition: top 3s ease;
32    }
33
34    .hamburger-menu-list-text01.is-active {
35      top:  0;
36    }
37
38    .hamburger-menu-list-text02.is-active {
39      top: 0;
40    }
41
42  </style>
43</head>
44<body>
45  <p>Q:ホバー時にテキストを入れ替えしホバーを外しても戻らないようにする</p>
46  <div class="hamburger-menu-list-container01">
47    <a href="" class="hamburger-menu-list01">
48      <span class="hamburger-menu-list-text01 is-active">テキスト１</span>
49      <span class="hamburger-menu-list-text02">テキスト２</span>
50    </a>
51  </div>
52
53  <script>
54    // aタグと2つのspanタグを取得しています
55    const list1 = document.querySelector('.hamburger-menu-list01')
56    const text1 = document.querySelector('.hamburger-menu-list-text01')
57    const text2 = document.querySelector('.hamburger-menu-list-text02')
58
59    //aタグにマウスカーソルが入った時のイベントです
60    list1.addEventListener('mouseenter', () => {
61      if(text1.classList.contains('is-active')) {
62        // 初期表示のtext1がis-activeの時にtext2にis-activeを付け替えて表示を切り替えています
63        text1.classList.remove('is-active');
64        text2.classList.add('is-active');
65      } else if(text2.classList.contains('is-active')) {
66        // 初期表示のtext２がis-activeの時にtext１にis-activeを付け替えて表示を切り替えています
67        text1.classList.add('is-active');
68        text2.classList.remove('is-active');
69      }
70    })
71  </script>
72  
73</body>
74</html>