hoverで別要素（画像）を変更させたい。

Question

前提・実現したいこと

htmlほぼ初心者のため、失礼がありましたら申し訳ありません。
ボタンタグをマウスオーバーすると、隣の画像（別要素）が入れ替わるようにさせたいです。
jqueryを用いて試みています。

発生している問題・エラーメッセージ

jQuery自体は読み込まれていることは確認済みですが、当該ボタンをマウスオーバーさせても反応がありません。

該当のソースコード

<div class="container">
<nav class="btn-wrapper">
   <button type="button" class="btn-1" onclick="location.href='sample.html'">A</button>
   <button type="button" class="btn-2" onclick="location.href='sample.html'">B</button>
   <button type="button" class="btn-3" onclick="location.href='sample.html'">C</button>
</nav>

<main>
  <img src="images/画像1.png" alt="画像1"　class="change_image"
  style="display: block; margin: auto;" width="600px" height="380px" id="main-img">
</main>
</div>

試したこと

$(function() {
	$(".btn-1").hover(function() {
		$(".change_image").attr("src","images/画像2.png");
	});
	$(".btn-2").hover(function() {
		$(".change_image").attr("src","images/画像3.png");
	});
	$(".btn-3").hover(function() {
		$(".change_image").attr("src","images/画像4.png");
	});
});

とjQueryを用いてみたが、反応せず。

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

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

Comments

[Lhankor_Mhy]

$("btn-1")
ドットが抜けているようですが、気にしなくていいですか？

[Danny16]

ご指摘ありがとうございます。
質問編集いたしました、ただ戦局に変化なしです、、

Answer 1

全角スペースが混ざっています。

<img src="images/画像1.png" alt="画像1" 　class="change_image"
↓
<img src="images/画像1.png" alt="画像1" class="change_image"

Comments

[Danny16]

思わぬところに落とし穴でした、、、
大変助かりました、ありがとうございました。