jsでマウスオーバーした時だけ、該当する画像を特定の位置に表示する（複数有）

Question

### jsを使いホバーしたときだけ特定の位置に該当する画像を表示
①～⑤までのメニューをホバーすると他の場所に①～⑤に該当する画像を表示①～⑤のメニュー以外にマウスがある時は初めの画像にもどる
例）メニュー①をホバーすると画像①が右側の初期画像Aの位置に表示され、なにもないところ（メニュー以外）にマウスがあるときは画像Aが表示されている

エラーメッセージはなにも表示されません。というか自分でどんな手法をつかうのかわからないのです。

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kei344]

https://teratail.com/help/question-tips#questionTips1-2

[gabaiyumi]

こんなにアドバイスいただいてありがとうございます。もう少し考えて、調べて。。実行してから投稿しますね。その際はよろしくお願いします。

Answer 1

こうかな？(違いそう)

  <header>header</header>
  <div class="wrapper">
    <nav class="menu">
      <ol>
        <li>あいうえお<img src="1.png" alt="" /></li>
        <li>かきくけこ<img src="2.png" alt="" /></li>
        <li>さしすせそ<img src="3.png" alt="" /></li>
        <li>たちつてと<img src="4.png" alt="" /></li>
        <li>なにぬねの<img src="5.png" alt="" /></li>
      </ol>
    </nav>
    <main>
      <img src="a.png" alt="" />
    </main>
  </div>

.wrapper {
  display: flex;
  position: relative;
}

.menu {
  width: 200px;
}

.menu li img {
  display: none;
}

.menu li:hover img {
  display: inline-block;
  z-index: 2;
}

.menu li img,
main img {
  position: absolute;
  left: 220px;
  top: 20px;
  width: 640px;
  height: 400px;
  border: 1px solid #5b9bd5;
  background: #5b9bd5;
}