テキストにマウスオーバーしたら画像が切り替わり、マウスが離れたら元に戻すという挙動にしたい

Question

メニューリストと画像を並べて
最初表示されている画像は「image1」、

「menu1」にhoverしたら「image1」に
「menu2」にhoverしたら「image2」に
「menu3」にhoverしたら「image3」に切り替わる
・
・
というのが6項目ほどあります。

<div class="contents">

     <img class="image-change" src="image1.jpg">
                    
<ul id="menu">
     <li class="menu1">テキスト1</li>
     <li class="menu2">テキスト2</li>
     <li class="menu3">テキスト3</li>
     <li class="menu4">テキスト4</li>
     <li class="menu5">テキスト5</li>
     <li class="menu6">テキスト6</li>
</ul>

</div>

マウスオーバーで画像が切り替わるのは、
とりあえずjqueryで出来ました（下記）。

$(function() {
    $(".menu1").hover(function() {
        $(".image-change").attr("src","image1.jpg");
    });
    $(".menu2").hover(function() {
        $(".image-change").attr("src","image2.jpg");
    });
    $(".menu3").hover(function() {
        $(".image-change").attr("src","image3.jpg");
    });
    $(".menu4").hover(function() {
        $(".image-change").attr("src","image4.jpg");
    });
    $(".menu5").hover(function() {
        $(".image-change").attr("src","image5.jpg");
    });
    $(".menu6").hover(function() {
        $(".image-change").attr("src","image6.jpg");
    });
});

ここから、マウスが離れた時に初期の画像に戻すようにしたいのですが、
どのようなコードを入れたらいいでしょうか。

また、上記のjqueryのコードは多分スマートじゃないと思うのですが、
もう少し完結になる書き方があれば教えていただけると嬉しいです。

よろしくお願いいたします。

Answer 1

「jQuery hover」などで検索すると出てきますが、以下のようにします。

$("セレクタ").hover(
    function() {
        // マウスオーバー処理
    },
    function(){
        // マウスが離れた際の処理
    }
);

Comments

[退会済みユーザー]

上記に書いたhtmlやcss等のコードから色々変えてしまったので、
一から自分なりに調べてやってみたら、思い通りの挙動になりました。
この度は回答ありがとうございました。

Answer 2

色々とコードが変わっていますが、
自己解決したので書いておきます。

<span class="trigger">メニュー</span>
<div class="contents">

     <img class="image-change" src="image1.jpg">

<ul id="menu">
     <li class="change-btn" data-src="image1.jpg">テキスト1</li>
     <li class="change-btn" data-src="image2.jpg">テキスト2</li>
     <li class="change-btn" data-src="image3.jpg">テキスト3</li>
     <li class="change-btn" data-src="image4.jpg">テキスト4</li>
     <li class="change-btn" data-src="image5.jpg">テキスト5</li>
     <li class="change-btn" data-src="image6.jpg">テキスト6</li>
</ul>

</div>

そもそもcontentsの部分が隠れていて
triggerにマウスオーバーしたら出てくるメニューにしました。

$(function() {
    $('.change-btn').mouseenter(function() {
        var click = $(this).data('src');
        $('#image-change').attr('src',click);
    });
    
    $('.trigger').on('mouseleave',function(){
        $('#image-change').attr('src','1.jpeg');
    });
});

前回書いたjqueryのコードが、同じことを繰り返し書いていて
スマートじゃないのが気に食わなかったので、
カスタムデータ属性で出来ないかと思って調べてやってみました。

大元のtriggerからマウスアウトした時に
初期画像に戻すという挙動にしたかったのでそうしてます。