html/css aタグ内の文字背景反転しない方法

Question

前提・実現したいこと

https://haniwaman.com/sample/part3/template_08/index.html
今こちらのサイトの模写をしています。
質問内容はナビゲーション（トップページ　改行　HOME）をhoverしたら、模写サイトは全体のbackground-imageが反転します。しかし私がコーディングしたら、文字のブロックにhoverした時文字ブロックのbackground-imageが区切られて反転してしまします。
文字タグ以外のところにhoverしたときは模写サイトのようになります。

文字にhoverしても背景が反転しない方法を教えてください。

↓このようになってしまいます。

nav {
  ul {
    display: flex;
    justify-content: space-around;

    li {
      display: inline-block;
      height: 70px;
      width: 100%;
    }
    a {
      background-image: linear-gradient(rgb(156, 227, 225) 0%, rgb(108, 198, 196) 100%);
      :hover {
        background-image: linear-gradient(rgb(108, 198, 196) 0%, rgb(156, 227, 225) 100%);
      }
      display: flex;
      flex-direction: column;
      border-right: #71c9c7 solid 1px;
      border-left: #99e1df solid 1px;
      border-top-right-radius: 200px 2px;
      display: block;
      height: 100%;
      color: rgb(255, 255, 255);
    }
    :hover {
      color: hsl(178, 100%, 88%);
    }
    .navja {
      display: block;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-weight: bold;
    }
    .naven {
      display: block;
      height: 15px;
      line-height: 15px;
      text-align: center;
      font-size: 77%;
      font-weight: bold;
    }
  }
}

<nav>
<!-- ナビゲーション ここから -->
  <ul>
    <li>
　    <a href="index.html" class="first">
      <span class="titleJa">トップページ</span>
      <span class="titleEn">HOME</span></a>
    </li> 
　　<!--　~ 　-->　					
  </ul>
<!-- ナビゲーション ここまで -->
</nav>

Comments

[m.ts10806]

CSS提示されないとなんとも言えません。
あと、コードのマークダウンできてません。下記など確認して、正しく反映してください。
https://teratail.com/questions/238564

[m.ts10806]

あと「CSSフレームワーク」は本件とどのように関係するのでしょうか。

[Lhankor_Mhy]

こんにちは。

このサイトのレイアウトの仕方はかなり古臭いもので、新たにページを作る際にはおそらく採用されないような手法です。
余計なお世話かと思いますが、10年前ならともかく、2020年にこのページを模写してもあまり勉強にならないと思います。教材を再検討されてはいかがですか？

Answer 1

こんにちは。
typoです。

/*    & を忘れている */
      &:hover { 
        background-image: linear-gradient(rgb(108, 198, 196) 0%, rgb(156, 227, 225) 100%);
      }

Comments

[note1]

＆を付けたらできました。ありがとうございます。
このレイアウトは確かにもう見ないので、別のサイトに変えます。