jquery - ナビゲーション用のjquery.hover（）

Question

ナビゲーションのデフォルト画像をホバー画像に変更するナビゲーション機能を作成します。

デフォルトの画像名は「main.png」で、ホバー画像は「main_hover.png」です。

jqueryを使用してhtmlsrc属性から画像名を抽出する方法を知っていますが、ファイル名「main」とファイル拡張子「.png」の間に文字列を追加する方法を知っています。

これまでの私のコード：

$(document).ready(function(){
    $(".nav").hover(function(){
        var default_button = this.src;
        // here is part where i need help with adding "_hover" to default_image
        $(this).attr('src', default_button) // i know i need this after image is not hovered
    });
});

Answer 1

jQueryを介してこれを行うべきではないかもしれませんが、cssの方法を使用してみませんか？

.nav {
 background: url(/path/to/main.png)
}

.nav:hover {
  background: url(/path/to/main_hover.png)
}

Answer 2

$(document).ready(function(){
    $(".nav").hover(function(){
        var default_button = this.src.replace(".jpg","_hover.jpg");
        $(this).attr('src', default_button) 
    });
});