ナビをhoverすると英語から日本語に変更（テキストチェンジ）するやり方

ヘッダーなどナビをhover（ホバー）すると英語⇔日本語に変更させるやり方を紹介します。
cssのdisplay:none;を使用！
今回はナビで使うように簡単に記載いたします。

＜html＞

<nav>
<ul>
<li><a href="#"><span class="1">Home</span><span class="2">ホーム</span></a></li>
<li><a  href="#"><span class="1">Menu</span><span class="2">メニュー</span></a></a></li>
</ul>
</nav>

＜css＞

ul li a .2{
  display: none;
}
ul li a:hover .1{
  display: none;
}
ul li a:hover .2{
  display: inline;
}

テキストだけではなく、liをhoverするとテキスト変更できるようにするにはこのやり方が個人的にやりやすいと感じました！
htmlにて「onMouseOver=」を使用したり、cssでpositionを使用する方法も調べて実践しましたが、
上記の"liをhoverするとテキスト変更できるようにする"には「display: none;」がやりやすかったです。